微信小程序实现下拉刷新

微信官方提供了下拉刷新的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

解决方法：微信小程序scroll-view（滚动组件）与onPullDownRefresh（下拉刷新）