微信官方提供了下拉刷新的api
api
在pages.json加入以下两行，页面就支持下拉刷新
"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
