一、前言

小程序分页，只要接口中有 当前页：page，每页记录数：page_size；就需要实现分页效果。我这里就来简单写一下小程序怎么实现分页。

• 我是后端，不太会写css，所以在网上找了一个页面 微信小程序商城系列之商品列表页（一），分页的逻辑是我写的。
• 分页数据是封装了一个方法模拟的，具体详情可以查看 Javascript分页：模拟后台返回数据方法

二、内容

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{
    color:#FF2727;
    margin-left:10px;
    margin-top:10px;
    font-size:15px;
  }
   
  .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
54

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'>￥{{item.goods_price}}view>
        <view class='num'>销量{{item.goods_xiaoliang}}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

4、js

Page({
    //页面的初始数据
    data: {
        page: 1, //默认第一页
        page_size: 10, //默认10条数据
        page_total: 1, //默认只有1页
        dataList: [], //商品列表数据
    },
    goodsList() { //获取商品数据
        let data = this.ajaxTest(); //模拟后台返回的数据
        let beforeList = this.data.dataList; //前面所有页数的数据
        let pageList = data.data; //当前页（最新页面）的数据
        if (this.data.page != 1) { //不是第一页，数据追加
           pageList = beforeList.concat(pageList); //之前的数据追加上最新的数据
        }
        this.setData(
            {
                dataList: pageList,
                page_total: Math.ceil(data.count / this.data.page_size) //根据后台返回的总数量，判断有多少页
            }
        );
    },
    ajaxTest() { //模拟Ajax分页返回的数据（只演示分页效果，code,msg参数这里暂不考虑）
        let oneGoods = {
            goods_id: 1,
            goods_title: '商品标题',
            goods_img: 'https://img2.baidu.com/it/u=2192782925,2374770702&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=761',
            goods_xiaoliang: '0',
            goods_price: '90'
        };
        let data = this.getPageData(oneGoods, this.data.page, this.data.page_size, 'goods_title', 98);
        return data;
    },
    /**
    * 模拟返回每一页的数据
    * @param pieceData 单条数据：object对象
    * @param page 当前页的数据
    * @param pageSize 每页记录数
    * @param nameField 需要修改的值的字段名（让我们能够区分数据变动了）
    * @param count 总记录数
    * @returns {{data: Array, count: number}} 模拟分页接口返回的结果数据
    */
    getPageData(pieceData, page, pageSize, nameField, count) {
        let pageData = []; //定义当前页数据
        count = count ? count : 99; //默认99条数据

        let name = pieceData[nameField]; //获取名称值
        let startNumber = (page - 1) * pageSize; //计算起始值

        //如果是最后一页，则pageSize的值可能小于默认值
        if ((page * pageSize) > count) { //如果最后一页的记录大于总页数，则需要重置pageSize
            pageSize = count - startNumber;
        }

        //模拟出page条数据
        for (let i = 1; i <= pageSize; i++) {
            //给nameField加上后缀，好让我们知道数据已经变动了
            pieceData[nameField] = name + (startNumber + i);

            // console.log(pieceData[nameField]);

            //对象是引用类型，传递的是引用地址，所以你两个数组引用的是同一个对象，只要其中一个数组改变，就会导致对象改变，进而另一个引用的数组也会改
            // pageData.push(pieceData); //此种方式追加：name值异常，得用JSON.parse(JSON.stringify(pieceData))
            pageData.push(JSON.parse(JSON.stringify(pieceData)));

            // console.log(pageData);
        }

        // console.log(JSON.stringify(pageData));

        return { count: count, data: pageData };
    },
    //生命周期函数--监听页面加载
    onLoad(options) {
        this.goodsList()
    },
    //生命周期函数--监听页面初次渲染完成
    onReady: function () {

    },
    //生命周期函数--监听页面显示
    onShow: function () {

    },
    //生命周期函数--监听页面隐藏
    onHide: function () {

    },
    //生命周期函数--监听页面卸载
    onUnload: function () {

    },
    //页面相关事件处理函数--监听用户下拉动作
    onPullDownRefresh: function () {

    },
    //页面上拉触底事件的处理函数
    onReachBottom: function () {
        if (this.data.page < this.data.page_total) { //如果当前页小于总页数，则获取下一页数据
            this.setData({ page: this.data.page + 1 }) //下一页
            this.goodsList();
        }
    },
    //用户点击右上角分享
    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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

三、注意

• 1、如果有 搜素，分类，Tab选项切换，等 需要重新调用商品接口的，请务必把 当前页设置为第一页，否则页码不是第一页，可能会没有数据，代码如下

this.setData({
    page: 1, //页码重置
});
1
2
3

• 2、当商品的列表为空时，可以给一张 没有数据的空图片 展示给用户，增强用户体验。
• 3、如果数据加载失败：热重载 选择 关