<template>
<view class="lst">
<view @touchmove="move" @touchstart="moveStart" @touchend="moveEnd" class="warp"
:style="{transform: 'translate(0px, '+scl.tranNum+'%) translateZ(0px)'}"
>
<view class="list end">
</view>
<view class="scorll" v-text="this.scl.sate?'释放查看':'查看更多'"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scl:{
right:0,//容器距离，判断是否达到最右侧
bottom:0,//容器距离，判断是否达到最右侧
0,//右滑块的width
tranNum:0,
tx:0,//滑动位置
lastX: 0,
lastY: 0,
inter:null,
sate:false,//状态
}
}
},
onShow() {
},
onLoad(options) {
},
onReady() {
},
methods: {
getDom(dom,callback){
let query = uni.createSelectorQuery().in(this);
query.select(dom).boundingClientRect(res => {
callback(res);
}).exec();
},
move(event){
let currentX = event.changedTouches[0].pageX;
let currentY = event.changedTouches[0].pageY;
let ty = currentX - this.scl.lastX;//向左滑动:tx<0 ,向右滑动tx > 0
let tx = currentY - this.scl.lastY;
if (Math.abs(tx) <= Math.abs(ty)) {//上下方向滑动
return;
}
this.getDom('.list',res=>{
this.scl.right = res.bottom.toFixed(0);
})
if(this.scl.width==0){
this.getDom('.scorll',res => {
this.scl.width = res.height.toFixed(0);
});
}
this.getDom('.end',res => {
if( this.scl.right == res.bottom.toFixed(0)){
this.scl.tx = this.scl.tx + tx;
let scale= -(this.scl.right / this.scl.width)*100;//计算占比
this.scl.tx = this.scl.tx<scale ? scale : this.scl.tx;
if(this.scl.tx<0){
if( -(scale -this.scl.tx) < 10){//这里的10按需求定(手指滑动多少距离执行)
this.scl.sate = true;
console.log(-(scale -this.scl.tx))
}else{
this.scl.sate = false;
}
this.scl.tranNum=this.scl.tx*0.1;
}
}
});
//将当前坐标进行保存以进行下一次计算
this.scl.lastX = currentX;
this.scl.lastY = currentY;
},
moveEnd(event){
if(this.scl.tx<=0){
this.scl.inter=setInterval(()=>{
this.scl.tx=this.scl.tx+10;
this.scl.tx = this.scl.tx>=0 ? 0 : this.scl.tx;
this.scl.tranNum=this.scl.tx*0.1;
if(this.scl.tx==0){
clearInterval(this.scl.inter);
}
},10);
}else{
this.scl.tx=0;
this.scl.inter && clearInterval(this.scl.inter);
}
if(this.scl.sate){//执行操作
this.scl.sate = false;
console.log("执行操作！")
}
},
moveStart(event){
this.scl.lastX = event.changedTouches[0].pageX;
this.scl.lastY = event.changedTouches[0].pageY;
}
}
}
</script>
<style lang="scss" scoped>
.warp{
position: relative;
100%;
white-space: nowrap;
-webkit-overflow-scrolling:touch;
transform: translate(0px, 0px) translateZ(0px);/*使用该属性来实现*/
.list{
height: 700px;
border: 1px solid;
}
.scorll{
display: inline-block;
vertical-align: middle;
font-size: 24rpx;
color: #999;
100%;
text-align: center;
position: absolute;
top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: -1;
}
}
</style>
参考于：https://www.cnblogs.com/xiaonian8/p/14928101.html