vue重构有赞商城-购物车4

一、原生向左滑动显示删除按钮

方法一：
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一开始并没有赋值，因为我不需要进行响应式处理

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">
- 根据商品的唯一ID进行操作

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层的封装主要是让我们不在关心url和fetch的异步请求

---

四、删除时候下一个商品继承属性

• v-for 模式下使用“就地复用”策略，简单理解就是会复用原有 的DOM结构，尽量减少dom重排来提高性能（解决方案:还原dom样式）
• key为每一个节点提供身份标识，数据改变时候会重排，最好绑定唯一标识，如果用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)';//把所有的商品的样式重置
})