这篇文章主要介绍了vue swipeCell滑动单元格(仿微信)的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

抽离Vant weapp滑动单元格代码改造而成

带有拉动弹性回弹效果

demo展示：https://littaotao.github.io/me/index（切换为浏览器调试的手机模式并且再次刷新一次）

<template>
 <div
  class="cell_container"
  @touchstart
  v-click-outside="handleClickOutside"
  @click="getClickHandler('cell')">
  <div
   :style="{'transform':
   'translateX('+(offset+(isElastic?elasticX:0))+'px)','transition-duration':dragging?'0s':'0.6s'}">
   <!-- <div ref="cellLeft" class="cell_left" @click="getClickHandler('left', true)">
    <div>收藏</div>
    <div>添加</div>
   </div> -->
   <div
    @touchend="onClick()"
    :class="offset?'cell_content':'cell_content_active'">SwipeCell</div>
   <div ref="cellRight"
    class="cell_right"
    @click="getClickHandler('right', true)">
    <div
     :class="type?'divPostion':''"
     ref="remove"
     :style="{'background':'#ccc','padding-left':'10px','padding-right':10+(isElastic?Math.abs(elasticX/3):0)+'px','transition-duration':dragging?'0s':'0.6s'}">标记</div>
    <div
     :class="type?'divPostion':''"
     ref="tag"
     :style="{'transform': type?'translateX('+(-offset*removeWidth/cellRightWidth-(isElastic?elasticX/3:0))+'px)':'','padding-left':'10px','padding-right':10+(isElastic?Math.abs(elasticX/3):0)+'px','transition-duration':dragging?'0s':'0.6s','background':'#000'}">不再关注</div>
    <div
     :class="type?'divPostion':''"
     :style="{'transform': type?'translateX('+(-offset*(removeWidth+tagWidth)/cellRightWidth-(isElastic?elasticX/3*2:0))+'px)':'','padding-left':'10px','padding-right':10+(isElastic?Math.abs(elasticX/3):0)+'px','transition-duration':dragging?'0s':'0.6s'}">删除</div>
   </div>
  </div>
 </div>
</template>
<script>
import ClickOutside from 'vue-click-outside';
import { TouchMixin } from '@/components/mixins/touch';
export default{