vue中vant滑动单元格组件踩坑记录

移动端项目中用vant组件感觉还是不错的 但是今天在调用vant的滑动单元格组件实现类似于微信聊天列表的左滑删除功能时因为业务需求 还有自己的技术水平的缘故 常在河边走 哪有不湿鞋
主要实现的功能就是 渲染出一个类似微信聊天列表的页面 这个页面可以上拉加载下拉刷新 然后这个页面的每个列表都可以左滑删除 同时每个列表还可以点击进入详情页 我就是实现了左滑出现删除按钮 但是随意再次点击列表应该是删除按钮隐藏 但是我这一直是出现删除按钮还在的情况下点击列表页的时候跳转详情页 这个问题困扰我了很长时间 我的想法就是监听这个单元格的滑动 如果监听到它左滑了 就设置一个状态 在这个状态下点击列表是不会跳转页面的 但是问题是不知道该如何下手 怎么监听 最后经过导师的指导终于解决了 下面上代码

//模版中的代码
<li v-for="(item,index) of iconlist" :key="index" @click.stop="opendetail">
        <van-swipe-cell :right-width="65" :left-width="0" :on-close='onClose'>
          <van-cell-group>
						<div ref="left">
              <p class="litopbar">{{item.title}}</p>
              <p>税号 : {{item.shuinum}}</p>
						</div>
          </van-cell-group>
          <span class="cancel" slot="right" @click="leftcancel">删除</span>
        </van-swipe-cell>
      </li>
   // js代码
onClose(clickPosition, instance){
      let e = window.event;
          e.preventDefault();
          e.stopPropagation()
          instance.close();//这个函数就是让滑动的模块返回的操作  e.preventDefault()阻止默认行为;e.stopPropagation()阻止冒泡
		    	console.log('正在左滑')
		},

这里是滑动单元格的异步操作事件 可以通过上面的 e.preventDefault()e.stopPropagation() 两个函数实现完整需求