单击查看详情,长按删除

商城项目,收藏管理

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


单击详情长按删除.gif

WXML


  
    
      
      
        {{item.pName}}
        ¥{{item.pPrice}}
      
    
  


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,
      });
    }
  },

原理

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

你可能感兴趣的:(单击查看详情,长按删除)