<scroll-view scroll-x="false" scroll-y="true" :scroll-top="scrollTop"
class="tabContainer" ref="tabContainer"
style="flex:1;overflow: auto;padding:0 15px;height:500px"
@touchstart="handleTouchStart" @touchend="handleTouchEnd"
@scroll="scroll"
</scroll-view> <script>
export default{
data(){
return {
scrollTop:0
}
},
methods: {
handleTouchStart(e) {
this.touchStartData.time = new Date().getTime();
this.touchStartData.clientX = e.changedTouches[0].clientX;
},
handleTouchEnd(e) {
let time = new Date().getTime();
if (time - this.touchStartData.time < 50) {
//滑动时间太短
return;
}
const subX = e.changedTouches[0].clientX - this.touchStartData.clientX;
if (subX > 100) {
//右滑
if (this.current == 0) {
this.current = 2;
} else {
this.current -= 1;
}
} else if (subX < -100) {
//左滑
if (this.current == 2) {
this.current = 0;
} else {
this.current += 1;
}
}
},
scroll(e) {
this.scrollTop = e.detail.scrollTop
},
}
}
</script>
0 个回复