文章仅是自己在写代码过程中,总结出来的。本人也是新手小白,如果有更优雅的方法写法,欢迎留言。贴出来的代码都是经过试验的。
微信小程序可使用页面方法做到列表下拉刷新,上拉加载功能。也可以通过<scroll-view>实现列表功能。
一、下拉刷新与上拉加载(用Page本身的方法实现,不是<scroll-view>)
1、配置page中的json,将enablePullDownRefresh设置为true,开启下拉刷新。设置onReachBottomDistance的值,开启上拉加载。
PS:enablePullDownRefresh也可在app.json中进行全局设置。但全局设置会将一些不需要下拉功能的页面变为也可下拉。个人不推荐进行全局配置,在需要下拉操作的page的json中单独加入即可。
// pages/reserve/reserve.json
{
"navigationBarTitleText": "页面名称",
"enablePullDownRefresh": true, //开启下拉刷新
"backgroundTextStyle":"dark",//下拉刷新的点点颜色,可在app.json中配置
"onReachBottomDistance": 50//距离底部多远开始加载
}
2、在对应page的js中添加方法,onPullDownRefresh下拉刷新方法、onReachBottom上拉加载方法,是page中自带的。文档位置:框架--注册页面--Page
// pages/reserve/reserve.js 代码我尽量写全,显得有点杂乱,看的时候可以复制下来,不需要的代码自行删除
Page({
data: {
username: '',
password: '',
page:1,
hasMoreData: true,//是否还有更多数据
hasFail: false,//获取列表数据是否出错
list: []
},
onLoad: function (options) {
// 获取上一页传入的参数
this.setData({
username: options.username,
password: options.password
});
this.getList(); //获取列表数据的方法
},
onPullDownRefresh: function () {
//下拉刷新,由于我的列表数据是分页的,所以下拉刷新时,需要将page置为1,再调用获取列表数据的方法
this.setData({ hasMoreData: true, page: 1 }, () => this.getList());
},
onReachBottom: function () {
//上拉加载,判断是否还有数据,如果没有数据,则不执行获取数据的方法,避免重复无用的调用接口
this.data.hasMoreData ? this.getList() : null;
},
//获取列表数据
getList: function () {
let _this = this;
//加载数据时,提示用户
wx.showLoading({
title:"数据加载中...",
mask:true
});
//通过接口获取数据
wx.request({
url: config.url.serviceUrl + 'sfbapi/kefuQueryWX',
data: {
action: 'List',
u: this.data.username,
p: this.data.password,
page: this.data.page, //分页
pageSize: 20 //单页数据量
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (ret) {
//因为是分页加载的列表,因此需要判断,是否是第一页,是则需要将数据清空,否则将之前的列表数据赋值
let listData = _this.data.page == 1 ? [] : _this.data.list;
//接口获取数据成功,将下拉刷新的操作停止(动画停止)
wx.stopPullDownRefresh();
//设置数据,将获取到的数据接入之前的数据之后
_this.setData({
list: listData.concat(ret.data.list),
hasFail: false
});
//获取的数据条数为0或小于20(20是设置的每页数据条数),则说明之后没有数据了
if (ret.data.list.length == 0 || ret.data.list.length < 20) {
_this.setData({ hasMoreData: false });
} else {
//否则之后还有数据,将页数加1
_this.setData({
hasMoreData: true,
page: ++_this.data.page
})
};
},
fail: function () {
_this.setData({
hasFail: true
});
},
complete:function(){
wx.hideLoading();
}
})
}
)}
二、通过API中的wx.pageScrollTo实现返回顶部。
PS:我将返回顶部的wxml写成了一个模板,将以下返回顶部的代码放入了util.js中,比较方便复用。
goTop: function () {
if (wx.pageScrollTo) { //当滑动距离不为0(不处于顶部时)
wx.pageScrollTo({
scrollTop: 0 //设置滑动距离为0
})
} else { //版本过低时的兼容操作
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
}