微信小程序实现简单下拉加载更多
目录
微信小程序实现简单下拉加载更多
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();
}