微信官方提供了下拉刷新的api
api
加入以下两行,页面就支持下拉刷新
"enablePullDownRefresh": true ,
"backgroundTextStyle": "dark"
示例
在pages.json中配置需要下拉刷新的页面
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "111",
"navigationBarBackgroundColor": "#ffffff",
//加入这两行
"enablePullDownRefresh": true ,//允许下拉刷新
"backgroundTextStyle": "dark" //背景颜色为黑色,可选参数white
//结束
}
},{
"path": "pages/community/community",
"style": {
"navigationBarTitleText": "社区",
"navigationBarBackgroundColor": "#ffffff"
}
}]
在页面中调用下拉刷新的方法
api
onPullDownRefresh: function () {
//调用刷新时将执行的方法
this.refresh();
},
示例
async refresh() {
console.log("页面开始刷新");
const res_public = await this.$u.api.personal.listPublicProject({
type: "all",
});
const fileList = res_public.msg.map((item) => ({
isStar: item.is_star,
filename: item.name,
date: item.time,
pid: item.project_id,
}));
},
//下拉刷新
onPullDownRefresh: function () {
//调用刷新时将执行的方法
this.refresh();
},
总结
小程序下拉很容易实现,但是在使用过程中也遇到了问题,如果页面中有scroll-view元素的情况下,下拉刷新会失效,根据官方api描述 在滚动 scroll-view
时会阻止页面回弹,所以在 scroll-view
中滚动,是无法触发 onPullDownRefresh