微信小程序购物车滑动删除

商品信息(图片+ 价格+ 加购)是经常会复用到的模板写在template里面滑动删除主要是结合微信自带的 moveble-area+ movable-view bindtouchstart="touchstart" bindtouchmove="touchmove" 通过touch事件来控制滑动

<!-- 商品组合 -->
<!-- goodsType: gift 赠品, common 普通商品带 + - 购物车,   售罄  isVip: true/false是否为心享会员
  'gray-mask': 送葱商品不满足条件时置灰显示-->
<template name="goods-detail">
  <movable-area class="mova_area {{goodsType === 'gift' ? 'min-mova' : ''}} {{item.saleType === 'C' ? 'cycle-buy' : ''}}">
    <movable-view class="mova_view {{!!giftShallotInfo && giftShallotInfo.isSatisfyGiftShallot === 'N' && item.goodsID == giftShallotInfo.shallotGoodsData.id ? 'gray-mask' : ''}}" direction="horizontal" inertia="true">
      <view class="soldout_mask" wx:if="{{goodsType === 'out'}}"></view>
      <view class="flexs s_b ontime_list {{item.isTouchMove &&  goodsType === 'common' ? 'touch-move-active' : ''}}" data-type="{{goodsType}}"    data-goodsID="{{item.goodsID}}"
       bindtouchstart="touchstart" bindtouchmove="touchmove">
        <view class="flexs s_b content" >
          <view class="flexs a_t goodsbutton {{goodsType === 'gift' ? 'typea' : '' }}{{goodsType === 'out' ? 'typec' : ''}}" catchtap="checkSingle"  data-goodsID="{{item.goodsID}}">
            <view wx:if="{{goodsType === 'out'}}" class="out-radio"></view>
            <radio-check wx:if="{{goodsType === 'common'}}" checked="{{item.isSelected === 'Y'}}" size="36rpx"></radio-check>
          </view>
          <template is="goods" data="{{goodsType: goodsType, picUrl, item,  isVip, isLogin}}"></template>
        </view>
        <view class="flexs a_t del" catchtap="del" data-goodsID="{{item.goodsID}}" data-list='preSale'>
            删除
        </view>
      </view>
    </movable-view>
  </movable-area>
</template>

购物车cart.wxml 循环调用模板即可

<!-- 商品列表 -->
 <view class="goods-list">
  <template is="goods-detail" wx:for="{{item.validGoodsList}}" wx:for-item="pItem" wx:for-index="pIndex" wx:key="pIndex" 
       data="{{goodsType: 'common', picUrl, item: pItem, isfromAcrivityPage: false, isLogin, giftShallotInfo, isVip}}"></template>
  </view>

cart.js

//手指触摸动作开始 记录起点X坐标
  touchstart(e) {
    const {
      goodsid,
      type
    } = e.currentTarget.dataset
    if (type !== 'common') return
    this._handleList.forEach(v => (v.isTouchMove = false))
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      cartList: this.data.cartList
    })
  },
  //滑动事件处理
  touchmove(e) {
    const {
      goodsid,
      type
    } = e.currentTarget.dataset
    if (type !== 'common') return
    let startX = this.data.startX, //开始X坐标
      startY = this.data.startY, //开始Y坐标
      touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
      touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
      item = this._handleList.find(v => v.goodsID === goodsid),
      //获取滑动角度
      angle = this.angle(
        { X: startX, Y: startY },
        { X: touchMoveX, Y: touchMoveY }
      );
    if (Math.abs(angle) > 30) return;
    item.isTouchMove = touchMoveX <= startX // true: 右滑； fasle: 左滑
    this.setData({ cartList: this.data.cartList })
  },
  /**
   * 计算滑动角度
   * @param {Object} start 起点坐标
   * @param {Object} end 终点坐标
   */
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },

xuanweiH / Project-issue

微信小程序购物车滑动删除 #7