微信小程序实现分页加载效果
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现分页加载效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
分页加载功能大家遇到的应该会经常遇到，应用场景也很多，例如微博，QQ，微信朋友圈以及新闻类应用，都会有分页加载的功能，这不仅节省了我们用户的流量，还提升了用户体验。那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。
数据来自于后端（lumen带分页）
/**
* @todo 获取订单列表
* @return mixed
*/
public function getOrderList(){
$field = ['id','order_no','name','created_at','desc','order_status','pay_status'];
$orders = Order::where('uid',$this->user->id)->orderBy('created_at', 'desc')->paginate(5, $field);
return $orders;
}
数据
..wxjs
const util = require('../../utils/util.js');
Page({
/**
* 页面的初始数据
*/
data: {
// 前台显示list
showlist: [],
// 初始化page
page: 2,
height:600,
},
onLoad: function (options) {
var self = this;
// 请求后台
util.ajax('order/get' , '', 'GET', res => {
self.setData({
showlist: res.data,
})
})
},
/**
* 页面上拉触底事件的处理函数
*/
upcroll: function (e) {
var self = this;
var page = self.data.page++;
// 请求后台，获取下一页的数据。
util.ajax('order/get?page=' + page, '', 'GET', res => {
self.setData({
//向页面已有数据后面加数据
showlist: self.data.showlist.concat(res.data),
})
if (res.data=='') {
wx.showToast({
title: '没有更多数据',
})
}
})
}
})
..wxml
<view class='warp'>
<view class='container' >
<scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower="upcroll" lower-threshold="20" >
<view class='alllist' wx:for="{{showlist}}" wx:for-item="j" wx:key="key" name="info_border">
<view class='list'>
<view class='img'>
<image src='../../imges/imgicon/icon2.png' class='img'></image>
<view class='text'>{{j.name}}</view>
</view>
<view class='message'>
<view class='te'><text class='text'>日期：</text><text class='text cor'>{{j.created_at}}</text></view>
<view class='te text on'><text class='text'>描述：</text>{{j.desc}}</view>
</view>
</view>
<view class='text statsin'>
<view class='a left'>
<navigator url='#' class='waiting' >待接单</navigator>
</view>
<view class='a'>
<navigator url='#' class='okorder'>已完成</navigator>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
结果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。