关于uniapp原生的scollview的横向移动判断问题解决

在使用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
			},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值