目录

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

目录

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

1.微信小程序前端页面:

<block wx:for="{{list}}">
  <navigator url="/pages/udd/udd?id={{item.id}}">
    <l-card type="primary" l-img-class="right-card" position="left" image="/img/QQ.GIF">
      <view style="color: aquamarine;">id:{{item.id}}</view>
      <view class="content" style="color: yellowgreen;">标题:{{item.name}}</view>
      <view style="color: coral;">地址:{{item.adress}}</view>
      <view style="color: red;">价格:${{item.price}}</view>
    </l-card>
  </navigator>
</block>

2.前端js代码:

 onLoad: function (options) {
    var that = this
    wx.request({
      // 请求地址
      url: '',//填写自己的请求地址
      //传页码和每页显示的数量
      data: {
        length: 0
      },
      success: function (res) {
        that.setData({
          list: res.data.data
        })
      }
    })
  },
onReachBottom: function () {
    var that = this
    var length = this.__data__.list.length
    var arr = this.__data__.list
    wx.request({
      // 请求地址
      url: '',//填写自己的请求地址
      //传页码和每页显示的数量
      data: {
        length: length
      },
      success: function (res) {
        //判断是否有数据,如果没有数据给吃提示
        if (res.data.data != '') {
          wx.showToast({
            title: '正在加载中',
            icon: 'loading',
            duration: 2000
          })
          //把值发送到前端进行渲染
          that.setData({
            list: arr.concat(res.data.data)
          })
        } else {
          wx.showToast({
            title: '没有更多数据!',
            icon: 'error',
            duration: 2000
          })
        }
      }
    })
  },

后端控制器代码:

//此方法为微信小程序下拉加载更多
    public function last(Request $request)
    {
        //接收前端分页的值
        $length = $request->get('length');
        //实例化模型
        $model = new LastModel();
        //调用模型查询出数据
        $Rasdata = $model->Show($length);
        return ['code' => '200', 'msg' => '查询成功', 'data' => $Rasdata];
    }

后端模型代码:

 //连接表格
    protected $table = '';

    //实现列表下拉
    public function Show($length)
    {
        return $this->offset($length)->limit(5)->get();
    }