小程序商品列表：商品收藏实现_小程序开发 收藏列表页面

一、前言

未收藏的商品点击 [ 点击 ] 按钮，商品收藏数量 [ 自增1 ]，商品状态改为 [ 已收藏 ]。
我是后端，不太会写css，所以在网上找了一个页面 微信小程序商城系列之商品列表页（一），收藏的逻辑是我写的。

• 我们点击收藏之后，不调接口 重新请求数据，而是 直接改变现有的数据内容 ，达到 页面实时渲染 的效果。

二、内容

1、默认效果

2、css

.clear{
  clear: both;
  overflow: hidden;
}
navigator{
  display:inline;
}
.list{
  margin-top:10px;
}
 
.list .list_item{
  margin-top:10px;
  padding:10px;
  height:100px;
  border-bottom:1px solid #E8E8E8;
}
.list .list_item .img{
  float:left;
  width:40%;
  height:100%;
}
.list .list_item .img image{
   width:100%;
   height:100%;
}
 
.list .list_item .info{
  width:59%;
  float:right;
  height:100px;
  position:relative;
}
.list .list_item .info .title{
  color:#333;
  margin-left:10px;
  font-size: 15px;
}
 
.list .list_item .info .price{
  margin-left:10px;
  margin-top:10px;
}

.list .list_item .info .num{
  position: absolute;
  left:0px;
  bottom:10px;
  color:#747474;
  margin-left:10px;
  font-size:15px;
}

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53

3、html

<view class='list'>
  <block wx:for='{{dataList}}' wx:key='list' wx:for-item="item">
  <view class="list_item">
      <navigator url='details?id={{item.goods_id}}'>
      <view class='img'>
        <image src="{{item.goods_img}}"  mode="scaleToFill"/>
      </view>
      <view class='info'>
        <view class='title'>{{item.goods_title}}</view>
        <view class='price'>
          <button class="mini-btn" wx:if="{{item.collect_status == 1}}" disabled="true" type="default" size="mini">已收藏</button>
          <button class="mini-btn" wx:else type="warn" size="mini" bindtap="collect" data-index="{{index}}">收藏</button>
        </view>
        <view class='num'>收藏 {{item.goods_collect}}</view>
      </view>
       </navigator>
      <view class='clear'></view>
  </view>
  </block>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4、js

Page({
  //页面的初始数据
  data: {
    page: 1, //默认第一页
    page_size: 10, //默认10条数据
    page_total: 1, //默认只有1页
    dataList: [{
        goods_id: 1,
        goods_title: '商品标题1',
        goods_img: 'https://img2.baidu.com/it/u=2192782925,2374770702&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=761',
        goods_collect: 1,
        collect_status: 1, //1-已收藏；0-未收藏
      },
      {
        goods_id: 1,
        goods_title: '商品标题2',
        goods_img: 'https://img2.baidu.com/it/u=2192782925,2374770702&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=761',
        goods_collect: 2,
        collect_status: 0, //1-已收藏；0-未收藏
      },
      {
        goods_id: 1,
        goods_title: '商品标题3',
        goods_img: 'https://img2.baidu.com/it/u=2192782925,2374770702&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=761',
        goods_collect: 4,
        collect_status: 1, //1-已收藏；0-未收藏
      }, {
        goods_id: 1,
        goods_title: '商品标题4',
        goods_img: 'https://img2.baidu.com/it/u=2192782925,2374770702&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=761',
        goods_collect: 8,
        collect_status: 0, //1-已收藏；0-未收藏
      }
    ], //商品列表数据
  },
  collect(e) { //收藏操作
    let index = e.currentTarget.dataset.index; //找到这条数据位于的索引
    this.setData({
      ['dataList[' + index + '].goods_collect']: this.data.dataList[index].goods_collect + 1, //收藏量加1
      [`dataList[${index}].collect_status`]: 1, //收藏状态设为已收藏
    });
  },
  //监听页面加载
  onLoad(options) {

  },
  //监听页面初次渲染完成
  onReady: function () {

  },
  //监听页面显示
  onShow: function () {

  },
  //监听页面隐藏
  onHide: function () {

  },
  //监听页面卸载
  onUnload: function () {

  },
  //用户下拉动作
  onPullDownRefresh: function () {

  },
  //页面上拉触底
  onReachBottom: function () {

  },
  //点击右上角分享
  onShareAppMessage: function () {

  }
})
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

4、点击收藏后