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