单击查看详情，长按删除

商城项目，收藏管理

实现单击可以查看商品详情，长按列表可以进行删除操作的功能

单击详情长按删除.gif

WXML

<view class="container">
  <view class="collect-list">
    <view class="item" bindtap="openGoods"  bindtouchstart="touchStart" bindtouchend="touchEnd" wx:for="{{collectList}}" wx:key="{{index}}" data-index="{{index}}">
      <image class="img" src="{{item.pImage}}"></image>
      <view class="info">
        <view class="name">{{item.pName}}</view>
        <view class="price">￥{{item.pPrice}}</view>
      </view>
    </view>
  </view>
</view>

CSS

样式略

JS

 data: {
    uId: wx.getStorageSync('$uId'),
    start: 1,
    length: 6,
    typeId: 0,
    collectList: []
  },
  openGoods(e) {
    let that = this;
    let goodsId = this.data.collectList[e.currentTarget.dataset.index].pId;
    //触摸时间距离页面打开的毫秒数  
    var touchTime = that.data.touch_end - that.data.touch_start;
    console.log(touchTime);
    //如果按下时间大于350为长按  
    if (touchTime > 350) {
      wx.showModal({
        title: '',
        content: '确定删除吗？',
        success: function(res) {
          if (res.confirm) {
            let data = {
              uId: that.data.uId,
              pId: goodsId
            }
            util.Post(api.cancleCare, data).then(function(res) {
              if (res.status === 200) {
                console.log(res.data);
                wx.showToast({
                  title: '删除成功',
                  icon: 'success',
                  duration: 2000
                });
                that.getCollectList();
              }
            })
          }
        }
      })
    } else {
      wx.navigateTo({
        url: '/pages/goods/goods?id=' + goodsId,
      });
    }
  },

原理

这个操作主要是利用了一个定时器，通过计算点击和松开的时间间隔，判断执行哪个操作。