使用Mint-ui中的cell-swipe组件如何解决滑动删除和路由跳转同时触发问题

本文链接：https://blog.youkuaiyun.com/chiwen_wen/article/details/88839228

出现问题

mint-ui在使用cell-swipe时滑动删除和路由跳转会同时触发。这肯定不是我们想要的结果。

如何解决

不使用组件本身的to进行跳转，而是通过点击事件配合移动端touch事件进行跳转。

直接上代码

HTML

	<div v-for="(item, index) in testList" key:="index" @click="handleRouter(item)">
      <mt-cell-swipe 
        v-if="item.id == 1"
        class="ct-list-hw"
        @touchstart.native="sideslip(item, '1')"
        @touchmove.native="sideslip(item, '2')"
        @touchend.native="sideslip(item,'3')"
        :right="[{
          content: '删除',
          style: { background: 'red', color: '#fff', padding: '20px 10px 0px 10px' },
          handler: () => deleteBtn(item.XXX, $event)
        }]"
        >
        <div>list样式</div>
      </mt-cell-swipe>
      <div v-else>如果需求要求右侧滑动和不滑动交替进行，可使用此HTML，否则直接使用mt-cell-swipe</div>
     </div>

js

	//接口获取到的列表数据testList
	that.testList.forEach((item,index)=>{
	   this.$set(that.testList,index,Object.assign({},{isFlag:true,timer:null},item))
	})
//侧滑事件
    sideslip(item,flag){
      if(flag == 1) if(item.timer) clearTimeout(item.timer);
      if(flag == 2) {item.isFlag = false;}
      if(flag == 3) item.timer = setTimeout(()=>{item.isFlag = true},2)
    },
    //防止侧滑是误触上拉加载
    pullScroll(type){
      //若存在项的isFlag为false（意味着触发cell-swipe）,则返回;
      let isFlag = this.dataList.some(item=>!item.isFlag);
      if(isFlag) return;
      this.getList(type); //获取列表数据
    },

css

	//class="ct-list-hw"在<mt-cell-swipe>样式</mt-cell-swipe>中使用样式，需要改变默认样式，自己找吧。
	
	//修改mt-cell-swipe默认样式
	.ct-list-hw .mint-cell-title {
	   flex: none;
	}
	.ct-list-hw .mint-cell-value {
	   flex: 100%
	}