小程序如何上拉加载获取分页数据
在小程序端分页之前先看下后端分页的sql:
前言:这里介绍MySql和Oracle的分页SQL
1.MySql分页
select * from stu limit m, n;
//m = (startPage-1)*pageSize,n = pageSize
(1)第一个参数值m表示起始行,第二个参数表示取多少行(页面大小)
(2)m= (2-1)*10+1,n=10 ,表示 limit 11,10从11行开始,取10行,即第2页数据
(3)m、n参数值不能在语句当中写计算表达式,写到语句之前必须计算好值。
2.oracle分页
select * from (
select rownum rn,a.* from table_name a where rownum <= x
//结束行,x = startPage*pageSize
)
where rn >= y; //起始行,y = (startPage-1)*pageSize+1
(1)>= y,<= x表示从第y行(起始行)~x行(结束行) 。
(2)rownum只能比较小于,不能比较大于,因为rownum是先查询后排序的,例如你的条件为rownum>1,当查询到第一条数据,rownum为1,则不符合条件。第2、3…类似,一直不符合条件,所以一直没有返回结果。所以查询的时候需要设置别名,然后查询完成之后再通过调用别名进行大于的判断。
现在开始编写小程序端的代码:
1.首先,在json文件里配置如下(开启上拉加载):
"enablePullDownRefresh": true
2.js内容如下
Page({
data(){
listData:'',
pageNumber: 1,//第N页
pageSize: 15,//显示N行
isMore: true, //是否有更多数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.onReachBottom(1)
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function (e) {
if (1 == e) { this.setData({ pageNumber: 1 }) }//判断是否首次进入,如果是则从第1页开始
var that = this;
if (this.data.isMore) {//如果存在更多则执行
var dataListTem = that.data.listData //定义一个数组使其等于data里定义的接收列表的数组
var dataJson = {"offset": that.data.pageNumber, "pageSize": that.data.pageSize}//接口分页参数
wx.request({
url: '第三方服务器URL',
data: { data: JSON.stringify(dataJson) },
header: {
'content-type': 'application/x-www-form-urlencoded', // 数据转换成 query string
},
method: 'POST',
success: function (res) {
console.log('请求到的数据---', res.data.data);
if (res.data.data.length != 0) {//如果请求到的数据长度不为0则执行
if (that.data.pageNumber == 1) {//当页数为1时,使上面定义的数组为空
dataListTem = []
}
var dataList = res.data.data //再定义一个数组使其等于后台返回的数组
var news = distinct(dataListTem, dataList)//数组合并
//如果后台返回的数组长度小于我每页要取的数据的长度,说明已经是最后一页了。
if (dataList.length < that.data.pageSize) {
that.setData({
listData: news,
isMore: false,//是否还有更多数据:没有
})
}else {
that.setData({
listData: news,
isMore: true,//是否还有更多数据:有
pageNumber: that.data.pageNumber + 1//页数加1
})
}
} else {//请求到的数据长度为0则表示无更多数据
that.setData({
isMore: false
})
}
function distinct(a, b) {//利用set特性去除重复值并且合并
return Array.from(new Set([...a, ...b]))
}
},
complete: function (s) {
if (s.statusCode != 200) {
wx.showToast({
title: '请求失败:' + s.statusCode + '',
icon: 'none'
})
}
}
})
} else {
console.log('没有更多数据')
}
},
})
3.wxml内容如下
<view wx:for="{{listData}}" wx:key="i">
<view>{{item.xxx}}</view>
....
</view>
<view class="weui-loadmore" wx:if="{{isMore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<view class="juxy-logo" wx:elif="{{!isMore}}" style="width:100%;text-align:center"><text>没有更多了!</text></view>
4.wxss内容如下
wxss代码--点击展开
.weui-loadmore {
width: 65%;
margin: 1.5em auto;
line-height: 1.6em;
font-size: 14px;
text-align: center;
}
.weui-loading {
margin: 0 5px;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
background-size: 100%;
}
.weui-loadmore__tips {
display: inline-block;
vertical-align: middle;
}
.juxy-logo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50rpx 0 10rpx;
}
.juxy-logo image {
width: 150rpx;
height: 40rpx;
}
.juxy-logo text {
font-size: 22rpx;
color: #aaa;
margin-top: 10rpx;
}
5.效果图:
--点击展开查看效果图
2 条评论
js代码中:var dataJson = {offset": that.data.pageNumber, "pageSize": that.data.pageSize}//接口分页参数
少了一个双引号
好眼力