在使用scollview时uniapp官方的文件并没有直接告诉你应该如何去判断到左边和右边的距离,那么我们应该如何判断有没有触底呢,在面临像轮播图一样控制左右指示器出现或者消失的时候我们应该如何计算。

<image v-show='mantop' class="mantop" src="/static/project/overhaul/bt-up.png" mode=""></image>
				<scroll-view scroll-x="true" class="manbox" @scroll="scroll" @scrolltoupper="scrolltoupper"
					@scrolltolower="scrolltolower" show-scrollbar='false'>
					<view class="man" v-for="(item,index) in tabs" :key="index" @click="changtab(index)"
						:class="tabnum == index?'active':''">
						{{item.name}}
					</view>
				</scroll-view>
				<image v-show='manbottom' class="manbottom" src="/static/project/overhaul/bt-up.png" mode=""></image>

这里前后两张图片是指示器,中间是内容

scroll(e) { //顶部滚动
				// console.log(e.detail.scrollLeft);
				let a = e.detail.scrollLeft
				if (a > this.scrollleft) { //赋值距离
					this.scrollleft = a
				}

				if (e.detail.scrollLeft < 50) {//这个是给右边的临界值
					this.mantop = false
					this.manbottom = true
				} else if (e.detail.scrollLeft >= 50 && this.scrollleft - e.detail.scrollLeft > 50) {
					this.mantop = true
					this.manbottom = true
				}
				// console.log(this.scrollleft);
			},
			scrolltoupper() { //左边到头
				this.mantop = false
				this.manbottom = true
			},
			scrolltolower() { //右边到头
				this.mantop = true
				this.manbottom = false
			},

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐