vue移动端实现左滑编辑/删除

• 根据项目需要使用 Vue-touch 实现了一个vue移动端的左滑编辑和删除功能，废话不多说，先看效果图，然后上代码吧！
   

• 第一步：安装   vue-touch 

npm install vue-touch@next --save

 

• 第二步：main.js 中引入

import VueTouch from 'vue-touch';
Vue.use(VueTouch, {
  name: 'v-touch'
});

• 第三步：使用（用v-touch包住你要左滑删除的内容）

<div class="wrap">
      <v-touch
        style="margin-bottom:10px"
        v-on:panstart="onPanStart(key)"
        v-on:panmove="onPanMove"
        v-on:panend="onPanEnd"
        v-for="(item, key) in list"
        :key="key"
      >
  <!-- 下面div这一块是我页面需要左滑删除的项目内容，你可以替换成你自己的 -->
        <div class="item df_sb item-p" :style="activeId === key ? swipe : ''">
          <p class="left-img">
            <img :src="item.image_url" alt>
          </p>
          <p class="url" v-if="item.redirect_url != '' ">{
  {item.redirect_url}}</p>
          <p class="city nothave" v-else>无</p>
          <p class="city">{
  {item.city}}</p>
          <