微信小程序数据列表的收藏与取消收藏操作

发表于 | 分类于

一、wxml

1
用户收藏商品的状态改变与否

二、wxml

1
2
3
4
<view class="everyli" wx:for="{{hotProjectList}}" wx:key="*this">
  <i data-id='{{item.id}}' data-kky='{{index}}' data-is_collect='{{item.is_collect}}' 
  class="iconfont {{item.is_collect == 1?'icon-shoucang_tianchong':'icon-shoucang'}} " bindtap='pcollect'></i>
</view>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
data: {
  hotProjectList: [],
},
pcollect: function(e) {
  var kky = e.target.dataset.kky
  var that = this
  var isCollect = e.target.dataset.is_collect
  var isCollect = (isCollect == 1) ? 0 : 1
  
  wx.request({
    url: 'xxxxxx',
    data: {
      id: e.target.dataset.id,
      is_collect: isCollect,
    }
    success: function(res) {
      if (res.data.code == 1) {
        
        that.setData({
          ['hotProjectList[' + kky + '].is_collect']: isCollect,
        })
        var text = '收藏成功';
        if (isCollect == 0) {
          text = '取消收藏成功';
        }
        wx.showToast({
          title: text,
          icon: 'success',
          duration: 2000
        });
      } else {
        console.log('接口报错', res)
      }
    }
  })
},

三、分析

1
2
3
核心点:class="iconfont {{item.is_collect == 1?'icon-shoucang_tianchong':'icon-shoucang'}} " 
模板文件中使用三元运算符,通过下标主键指定当前item的key