微信小程序下拉加载

wxml代码：

<view class="scroll">
<!-- 绑订页面上拉触底事件的处理函数onReachBottom事件 -->
    <scroll-view scroll-y="{{true}}" style="height: 400px;" bindscrolltolower="onReachBottom">    
    <view>{{test}}</view>
    <!-- 参数循环data js中的data 数据 -->
    <block wx:for="{{datas}}" wx:key="index">
    <!-- 页面渲染 -->
        <view>{{item.content}}</view>
    </block>
</scroll-view>

</view>

wxjs 代码：

// pages/pre/pre.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        focus:false,
        test:'fsdafa',
        datas:[
{id:1,content:'021/10/20'},
{id:2,content:'021/10/20'},
{id:3,content:'021/10/20'},
{id:4,content:'021/10/20'},
{id:5,content:'021/10/20'}
        ]
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        
        let datass=[
            {id:6,content:'021/10/20'},
            {id:7,content:'021/10/20'},
            {id:8,content:'021/10/20'},
            {id:9,content:'021/10/20'}
        ]
        let that=this
        let arr=that.data.datas.concat(datass);
        this.setData({
            datas:arr
        })
    },

效果图：

 

 

 第二种方法

wx.js

// 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]);

    }