uniapp 滑动回弹效果

<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,//容器距离，判断是否达到最右侧
                    width:0,//右滑块的width
                    tranNum:0,
                    tx:0,//滑动位置
                    lastX: 0,
                    lastY: 0,
                    inter:null,
                    sate:false,//状态
                }
            }
        },
        onShow() {
            
        },
        onl oad(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;
        width: 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;
            width: 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

标签：uniapp,回弹,tx,scl,res,width,let,滑动,event
来源： https://www.cnblogs.com/chenshaoxiong/p/15330618.html