下拉与触底函数是每一个页面都有的事件函数, 同页面生命周期函数类似 : 监听并执行
onPullDownRefresh 判断用户在最顶部下拉时触发, 如果下拉后再拉回去则不触发
onReachBottom 判断用户到达最底部时触发
如果当面页面的内容, 不够多时可能不触发
一般需要在wxss中设置页面的高度为100%
page{
height: 100%;
}
下拉刷新的作用是刷新当前页面, 可能是由于网络原因卡慢等, 需要重新加载当前页面
触底加载的作用是加载下一页的内容, 一般是用户需要浏览更多的内容
不论是下拉还是触底刷新, 都是更新当前页面中的内容
如果后端分好页以后, 只需要根据当前页面, 发送不同数据到后端取得需要数据, 再渲染
原理就是这样, 如下实现:
说明: currentObject是封装好的分页对象, 包含的是所需要的所有数据(一共多少页, 当前是多少页, 数据库记录 等等)
arr是currentObject中的集合数据, 即目标数据(数据库记录)
后台是根据你发送的页码, 去查询得到该页码的数据, 所以关键是正确发送页码
Page({
data: {
currentObject: {}, // 表示当前分页的对象
arr : [], // 表示当前分页的对象中, 数据库中的记录集合
},
// 下拉刷新当前页
onPullDownRefresh: function (e) {
console.log("执行下拉刷新当前页的内容");
// 显示顶部刷新图标
wx.showNavigationBarLoading();
var that = this;
wx.request({
url: 'http://127.0.0.1:4444/getXxx', // 请求数据的url
data : {
currentPage: that.data.currentObject.currentPage, // 先取出当前页, 表示将要获取当前这个页面的内容
item : 6
},
success: function (res) {
that.setData({
currentObject: res.data, // 分页对象
arr: res.data.songList // 分页对象的集合属性, 代表数据库记录
});
// 隐藏导航上的加载框
wx.hideNavigationBarLoading();
// 停止下拉动作
wx.stopPullDownRefresh();
}
})
},
// 触底加载下一页
onReachBottom: function () {
console.log("触底加载下一页的内容");
// 显示一个加载图标
wx.showToast({
title: '正在加载中...',
duration : 15000, // 提示消息的最大持续时间 15s
icon: 'loading'
});
var f = function () {
wx.hideToast();
};
var that = this;
wx.request({
url: 'http://127.0.0.1:4444/getXxx',
data: {
currentPage: that.data.currentObject.currentPage + 1, // 下一页
item: 6
},
success: function (res) {
that.setData({
currentObject: res.data, // 分页对象
arr : res.data.songList // 分页对象的集合属性, 代表数据库记录
});
// 隐藏加载提示
setTimeout(f, 500); // 加载成功后, 我让它0.5s后再隐藏
}
})
},
})
其它注意事项:
app.json中
"window": {
"backgroundTextStyle": "", // 这个值不能是light, 否则下拉动作效果不明显
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
当前页面的json文件中, 比如index.json中, 打开下拉刷新
{
"enablePullDownRefresh": true, // 这个值默认是false, 将其改为true, 否则无法下拉
"navigationBarTitleText": "index页面"
}
还有那种分页, 可以点击下一页, 上一页, 转到第xx页, 这种分页在web中是非常常见的
小程序中也可以做, 后端不用变, 只需要前端更改布局, 显示出上一页, 下一页, 第xx页, 跳转到第xx页... 等链接
然后更换data的内容, 如下:
Page({
data: {
songObj: {}, // 分页查询到的数据对象
songs: [], // 数据对象中 的 数据库记录
indexArr: [], // 数据对象中 的 导航链接
inputData: '', // 输入框中, 用户输入的指定的跳转页
},
/***********这里我初始加载第一页, 每页6条数据库记录********** */
/***********其实我是可随意加载第几页, 随意设置每页显示多少条记录***********/
onLoad: function(e) {
wx.setStorageSync("src", 0);
var _this = this;
wx.request({
url: app.globalData.preFixedUrl + 'getPageData', // 请求开发者服务器
data: { // 开发者服务器根据如下此参数分页
currentPage: 1,
item: 6
},
success: function(e) { // e.data是分页查询到的数据对象
// e.data.end是数据对象中的一个数据, 表示导航链接的结束
// e.data.start是数据对象中的一个数据, 表示导航链接的开始
var arr = new Array(e.data.end - e.data.start + 1);
var data = e.data.songs;
_this.setData({
songs: e.data.songs,
songObj: e.data,
indexArr: arr
});
}
})
},