uniapp 实现左滑菜单

<template>
    <view>
        <image  class="head-bg" src="../../static/img1.png" 
            @click="showpopup=!showpopup"/>
        <view  class="mask-wrap" @touchstart="touchStart" @touchend="touchEnd">
            <!-- 遮罩层 -->
            <view class="drawer-mask" :class="{'drawer-mask-active':showpopup}"  @click="showpopup=!showpopup"></view>
            <!-- 滑动菜单列表 -->
            <view class="draw-info" :class="{'draw-info-active':showpopup}">
                <scroll-view style="height: 100%;" scroll-y="true">
                    <view v-for="(item,index) in 20" :key="index">菜单{{index+1}}</view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>
 

<script>
    export default {
        data() {
            return {
                showpopup: false,
                startX: 0, // 滑动起始坐标
                endX: 0    // 滑动离开时坐标
            }
        },
        methods: {
            touchStart(e){
                this.startX = e.changedTouches[0].clientX;
            },
            touchEnd(e){
                this.endX = e.changedTouches[0].clientX;
                var moveDis = this.startX - this.endX;
                if(moveDis==0) return;  //没有移动距离不显示
                if(moveDis>10){
                    this.showpopup = false;
                }else{
                    this.showpopup = true;
                }
            }
        }
    }
</script>

<style scoped>
    .head-bg{
        position: fixed;
        top: 30rpx;
        left: 30rpx;
        z-index: 1;
        width:100rpx;
        height: 100rpx;
    }
    .mask-wrap{
        position: fixed;
        left:0;
        top:0;
        width: 100%;
        height:100%;
        z-index:30;
    }
    .draw-info{
        position: fixed;
        top:0;
        left:0;
        right:0;
        bottom: 0;
        width: 60%;
        z-index:50;
        background-color: #fff;
        padding:20rpx 30rpx;
        box-sizing: border-box;
        transform: translateX(calc(-100% + 20rpx));
        transition: transform 0.3s ease;
    }
    .draw-info-active{
        z-index:50;
        transform: translateX(0px);
    }
    .drawer-mask{
        position: fixed;
        left:0;
        right:0;
        top:0;
        bottom: 0;
        background-color: rgba(0,0,0,0.4);
        opacity: 0;
        transition: opacity 0.3s; 
        z-index:-50;
    }
    .drawer-mask-active{
        z-index:30;
        opacity: 1;
    }
    
</style>