功能：點擊首頁菜單按鈕，滑出菜單欄，點擊空白處或者手指右滑收起。
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)
        }
            }