功能：点击首页菜单按钮，滑出菜单栏，点击空白处或者手指右滑收起。
html结构：

<!-- 遮罩层 -->
<view class="mask" v-if="mask" @tap="_mask" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :class="[ siderClass ? 'animation-fade-out' : 'animation-fade' ]"></view>

<!-- 菜单栏-->
<view class="side_bar" v-if="mask" :class="[ siderClass ? 'animation-slide-right-out' : 'animation-slide-left' ]" :style="{ left : leftSlide }" @touchstart="touchS" @touchend="touchE">
<view>

JS:

// data中定义
data() {
    return {
         mask: false, // 遮罩层切换
     siderClass: false,  // 样式切换
     startX: '', // 触摸开始位置
     endX: '', // 触摸结束位置
    }
}

    methods: {

        // 手指触摸事件 用于菜单左滑
        touchS:function(e) {
            _self.startX = e.touches[0].clientX
            // console.log('开始' + e.touches[0].clientX );
        },
        touchE:function(e){
            _self.endX = e.changedTouches[0].clientX;
            // 触摸开始到停止 的差值
            var disX = _self.startX - _self.endX;
            if(disX >= 0) {
                _self.siderClass = true
                setTimeout(()=>{
                    _self.mask = false
                },300)
            }
        },
        // 菜单盒子的遮罩层
        _mask() {
            _self.siderClass = true
            setTimeout(()=>{
                _self.mask = false
            },350)
        }
            }