一、原生向左滑動(dòng)顯示刪除按鈕

方法一：
html:

 <li class="block-item block-item-cart"
  :class="{editing:shop.editing}"
  v-for="(good,goodIndex) in shop.goodsList"
  :ref="'goods-'+shopIndex+'-'+goodIndex"
  @touchstart="start($event,good)"
  @touchend="end($event,shopIndex,good,goodIndex)"
 >

• 分別綁定@touchstart="start($event,good)"及@touchend="end($event,shopIndex,good,goodIndex)"
• good.startX一開(kāi)始并沒(méi)有賦值，因?yàn)槲也恍枰M(jìn)行響應(yīng)式處理

js:

import Velocity from 'velocity-animate'
methods:{
  start(e,good){
      good.startX = e.changedTouches[0].clientX
    },
    end(e,shopIndex,good,goodIndex){
      let endX = e.changedTouches[0].clientX
      let left = '0'
      if(good.startX - endX > 100){
        left = '-60px'
      }
      if(endX - good.startX >100){
        left = '0px'
      }
      Velocity(this.$refs[`goods-${shopIndex}-${goodIndex}`],{
        left
      })
    }
 }

方法二：
html:

  <li
   @touchstart="start($event)"
  @touchend="end($event,good)"
   :ref="'good-'+ good.id"
  :class="{'editing':list.editable}"
  v-for="(good,goodIndex) in list.goodsLists"
  :key="good.id"
  class="block-item block-item-cart" style="transition: .5s">
- 根據(jù)商品的唯一ID進(jìn)行操作

js:

    start(e){
       startX = e.changedTouches[0].clientX
    },
    end(e,good){
      endX = e.changedTouches[0].clientX
      if(!this.editingShop){
        let ele = this.$refs[`goods-${good.id}`][0]
        if(startX - endX > 100){
          ele.style.transform = 'translateX(-60px)'
        }else if(endX - startX> 100){
          ele.style.transform = 'translateX(0)'
        }
      }
    }

二、fetch層封裝

• 在公共文件夾新建文件fetch.js

import axios from 'axios'

function fetch(url,data){
  return new Promise((resolve,reject)=>{
    axios.post(url,data).then(res=>{
      let status = res.data.status
      if(status === 200){
        resolve(res)
      }
      if(status === 300){
        location.href = 'login.html'
        resolve(res)
      }
      resolve(res)
    }).catch(error=>{
      reject(error)
    })
  })
}

export default fetch

三、cartService.js層的封裝

import fetch from 'js/fetch.js'
import url from 'js/api.js'

class Cart{
  static add(id){
    return fetch(url.addCart,{
      id,
      number:1
    })
  }
  static reduce(id){
    return fetch(url.cartRemove,{
      id,
      number:1
    })
  }
}

export default Cart

• cartService層的封裝主要是讓我們不在關(guān)心url和fetch的異步請(qǐng)求

四、刪除時(shí)候下一個(gè)商品繼承屬性

• v-for 模式下使用“就地復(fù)用”策略，簡(jiǎn)單理解就是會(huì)復(fù)用原有 的DOM結(jié)構(gòu)，盡量減少dom重排來(lái)提高性能（解決方案:還原dom樣式）
• key為每一個(gè)節(jié)點(diǎn)提供身份標(biāo)識(shí)，數(shù)據(jù)改變時(shí)候會(huì)重排，最好綁定唯一標(biāo)識(shí)，如果用index 可能得不到想要的效果
• console.log(this.$refs[goods-${good.id}][0])
  

this.lists.forEach((item,i)=>{
  item.goodsList.forEach(good=>{
  let ele = this.$refs[`goods-${good.id}`][0]//獲取所有的商品
  ele.style.transform = 'translateX(0)';//把所有的商品的樣式重置
})