微信小程序下拉加载更多
发布于 3 年前 作者 qding 1073 次浏览 来自 分享

// pages/order/order.js

Page({

    /**

     * 页面的初始数据

     */

    data: {

        foods: [],

        // 定义一个默认的页数

        page: 1,

        // 每页显示的条数,后端也可以定义

        limit: 4,

    },

    /**

     * 生命周期函数–监听页面加载

     */

    onLoad: function (options) {

        let limit = this.data.limit

        let page = this.data.page

        let token = wx.getStorageSync(‘token’)

        wx.request({

            url: ‘http://www.yan.com/get_food’, //仅为示例,并非真实的接口地址

            header: { token },

            method: ‘POST’,

            data: {

                limit,

                page

            },

            success: res => {

                this.setData({

                    foods: res.data.data

                })

            }

        })

    },

    /**

     * 详情

     */

    details(e) {

        let id = e.target.dataset.id;

        wx.navigateTo({

            url: ‘/pages/food_details/food_details?id=’ + id,

        })

    },

    /**

     * 页面上拉触底事件的处理函数

     */

    onReachBottom: function () {

        let token = wx.getStorageSync(‘token’)

        let limit = this.data.limit

        let page = this.data.page + 1

        let foods = this.data.foods

        wx.request({

            url: ‘http://www.yan.com/get_food’, //仅为示例,并非真实的接口地址

            header: { token },

            data: {

                limit,

                page

            },

            method: ‘POST’,

            success: res => {

                if (res.data.code == 200) {

                    //请求到后端的数据,让onLoad的 数据和请求到的数据进行合并

                    let new_foods = foods.concat(res.data.data);

                    wx.showToast({

                        title: ‘加载中’,

                        icon: ‘loading’

                    })

                    // 从新进行赋值,让他继续循环

                    this.setData({

                        foods: new_foods,

                        page: page + 1

                    })

                } else if (res.data.code == 201) {

                    // 就是当前页大于最后一页啦,提示没有数据源啦

                    wx.showToast({

                        title: res.data.message,

                    })

                    return

                } else {

                    console.log(‘数据错误’)

                }

            }

        })

    },

})

laravel

Route::group(['namespace' =>'exams','middleware'=>'jwt'], function () {
    Route::post('get_food','week2\ExamController@orderList');
    Route::post('create_order','week2\ExamController@createOrder'

控制器

/**

     * 点餐列表

     */

    public function orderList(Request $request){

//        接受当前页

        $page=$request->post(‘page’);

//        接受每页显示的条数

        $limit=$request->post(‘limit’);

//        获取总条数

        $count=Food::count();

//        总页数

        $lastPage=ceil($count/$limit);

        if ($page>$lastPage){

            return response()->json([‘code’=>201,‘message’=>‘我是有底线的’,‘data’=>’’]);

        }

//        计算偏移量

        $offset=($page-1)*$limit;

        $data=Food::orderBy(‘id’,‘desc’)->offset($offset)->limit($limit)->get();

        return response()->json([‘code’=>200,‘message’=>‘success’,‘data’=>$data]);

    }

回到顶部