tab栏切换动画实现及注意事项

tab栏切换动画实现及注意事项

技术栈：vue

1. 遇到的问题

scene : 移动端页面左右滑动切换tab栏，实现页面切换类 app 原生动画，不影响页面正常点击事件

key : 移动端左右滑动，可以从touchstart , touchmove , touchend 事件入手，获取 pageX 左右移动的距离来判断方向，pageY 的上下移动距离来确定是否是滚动事件，监听 touch 的 trigger event 来判断是否是 tap 事件,从而实现功能

// template
<div @touchstart.stop = "touchStart" @touchmove.stop = "touchMove"  @touchend.stop = "touchEnd" class="touch-box">
</div>

// methods
touchStart(e) {
   
    const touch = e.touches[0]
    this.touch.startX = touch.pageX
    this.touch.startY = touch.pageY
    this.date_start = new Date().getTime();
},
touchEnd(e) {
   
    let touch = e.changedTouches[0]
    let date_end = new Date().getTime();
    let dur = date_end - this.date_start;
    let startX = this.touch.startX
    let startY = this.touch.startY
    let disX = touch.pageX - startX
    let disY = touch.pageY - startY   
    // 判断是滑动还是点击事件
    // 距离和时间可以自主调节
    if((Math.abs(disX)>10 && Math.abs(disX)< 130) || Math.abs(disY)>100){
   
        if(Math.abs(disX) > 5*Math.abs(disY)  && dur < 200){
   
            let slectTabArr = this.slectTabArr
            let number = 0 
            let selectTabFlag = getStorage('selectTabFlag')
            slectTabArr.filter((item,index)=>{
   
                if(selectTabFlag === item){
   
                    number = index
                }
            })
            if(disX < -10){
   
                // 向左滑动则向右选中列表中的数据切换
            }
            if(disX >10){
   
                // 向右滑动则向左选中列表中的数据切换
            }
        } else {
   
            return