[移动开发]微信小程序--下拉分页加载数据

1.前台数据渲染

<view wx:for="{{list}}" wx:key="index" class="list">
  <view>{{item.id}}</view>
  <view>{{item.goods_name}}</view>
  <view>{{item.goods_price}}</view>
  <view>{{item.goods_photo}}</view>
</view>

2.js页面

Page({
  /**
   * 页面的初始数据
   */
  data: {
    list:[],
    //页码
    page:1,
    //总页数
    pages:'',
    //每页显示的数量
    size:10
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    wx.request({
      url: 'http://www.wenk.com/index.php/admin/goodslist', //仅为示例，并非真实的接口地址
      data: {
        page: this.data.page,
        size: this.data.size
      },
      header: {
        'content-type': 'application/json' // 默认值
},
      success:function(res) {
        // console.log(res.data.data)
        // that.setData({
        //   list:res.data.data
        // })
        //返回数据后赋值、循环
        var arr = res.data.data;
        arr.forEach(function (v, k) {
            //将每一个值追加到list数组中
            that.data.list.push(v)
        });
        //替换掉list，page（page值为返回的值）
        that.setData({
            list: that.data.list,
            page: res.data.page,
            pages:res.data.pages
        })
      }
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom:function() {
    wx.showToast({
      title: '正在加载中...',
      icon:"loading"
    })
    var that = this;
    if(this.data.page >= this.data.pages){
      wx.showToast({
        title: '到底了',
        icon:'error'
      })
    }
    wx.request({
      url: 'http://www.wenk.com/index.php/admin/goodslist', //仅为示例，并非真实的接口地址
      data: {
        page: this.data.page,
        size: this.data.size
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success:function(res) {
        console.log(res.data.data)
        var arr = res.data.data;
        arr.forEach(function (v, k) {
            //将每一个值追加到list数组中
            that.data.list.push(v)
        });
        //替换掉list，page（page值为返回的值）
        that.setData({
            list: that.data.list,
            page: res.data.page
        })
      }
    })
  },

3.后端API接口

/**
     * 显示列表
     * @return \think\response\Json
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\DbException
     * @throws \think\db\exception\ModelNotFoundException
     */
    public function goodslist()
    {
        //页码
        $page = input('page');
        //每页数量
        $size = input('size');
        //查询数据
        $data = (new \app\admin\model\Goods())->select()->toArray();
        //向上取整计算出总页数
        $pages = ceil(count($data) / $size);
        //再次查询利用limit进行分段查询
        $data = (new \app\admin\model\Goods())->limit(($page - 1) * $size, $size)->select()->toArray();
        //返回页码，数据，总页数
        return json(['code' => 200, 'page' => $page + 1, 'data' => $data, 'pages' => $pages, 'msg' => '查询成功']);
    }