微信小程序--实现下拉加载更多

1.前端的数据动态渲染

<view class="box">
    <block wx:for="{{list}}">
    <navigator url="/pages/xiang/xiang">
        <view class="box2">
            <view>
                <image src="/img/iphone.png" style="width: 30%; height: 80px; float: left;"></image>
            </view>
            <view style="float: right;">
                <view>{{item.id}}</view>
                <view>{{item.name}}</view>
                <view style="color: red;">{{item.price}}$</view>
                <view>{{item.text}}</view>
            </view>
        </view>
    </navigator>
    </block>
</view>

2.js页面

 /**
     * 页面的初始数据
     */
    data: {
        //循环数据
        list: [],
        //页码
        page: '1',
        //总页数
        pages: '',
        //每页显示数量
        size: 5

    },

/**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

        var _this = this
        wx.request({
            // 请求地址
            url: 'http://www.xiao.com/index.php/list',
            //传页码和每页显示的数量
            data: {
                page: this.data.page,
                size: this.data.size
            },
            success: function (res) {
                //返回数据后赋值、循环
                var arr = res.data.data;
                arr.forEach(function (v, k) {
                    //将每一个值追加到list数组中
                    _this.data.list.push(v)
                });
                //替换掉list，page，pages（后边两个值均为返回的值）
                _this.setData({
                    list: _this.data.list,
                    page: res.data.page,
                    pages: res.data.pages
                })
            }
        })
    },

/**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        //页面加载中给出提示
        wx.showToast({
            title: '正在加载中....',
            icon: "loading"
        })
        var _this = this;
        //如果页码大于等于总页数，则做出提示
        if (this.data.page >= this.data.pages) {
            wx.showToast({
                title: '到底了',
                icon: 'error'
            })
        }
        wx.request({
            // 请求地址
            url: 'http://www.xiao.com/index.php/list',
            //传页码和每页显示的数量
            data: {
                page: this.data.page,
                size: this.data.size
            },
            success: function (res) {

                //返回数据后赋值、循环
                var arr = res.data.data;
                arr.forEach(function (v, k) {
                    //将每一个值追加到list数组中
                    _this.data.list.push(v)
                });
                //替换掉list，page（page值为返回的值）
                _this.setData({
                    list: _this.data.list,
                    page: res.data.page
                })
            }
        })
    },

3.在后端查询出数据并渲染到前台

//此方法为第一次加载调用的方法
    public function lsst()
    {
        //接值
        $page = Request::instance()->param('page');
        $size = Request::instance()->param('size');
        //new模型查询出数据后计算总页数
        $model = new BuyModel();
        $data = $model->select();
        $data = collection($data)->toArray();
        $pages = count($data);
        //向上取整计算出总页数
        $pages = ceil($pages / $size);
        //再次查询利用limit进行分段查询
        $data = $model->limit(($page - 1) * $size, $size)->select();
        //转化为数组
        $data = collection($data)->toArray();
        //返回页码，数据，总页数
        return json(['code' => 200, 'page' => $page + 1, 'data' => $data, 'pages' => $pages, 'msg' => '查询成功']);
    }

 //此方法为上拉时调用的方法
    public function listX()
    {
        //接值
        $page = Request::instance()->param('page');
        $size = Request::instance()->param('size');
        //new模型查询出数据
        $model = new \app\test\model\Lists();
        //利用limit进行分段查询
        $data = $model->limit(($page - 1) * $size, $size)->select();
        //转化为数组
        $data = collection($data)->toArray();
        //返回页码，数据（每次返回页码都+1）
        return json(['code' => 200, 'page' => $page + 1, 'data' => $data, 'msg' => '查询成功']);
    }