功能：点击首页菜单按钮，滑出菜单栏，点击空白处或者手指右滑收起。
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)
}
}
