8、微信小程序学习: 下拉刷新和上拉加载

微信小程序提供了下拉刷新和上拉加载的API。

一、下拉刷新

调用系统的API，系统有提供下拉刷新的API接口

1、需要在app.json里添加允许下拉刷新的属性:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh":true
  }
}

如果配置在app.json文件中，那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中，那么就是对应的页面，可以下拉刷新。

2、在index.js中添加代码，模拟下拉刷新：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
  },
  onLoad: function () {
    wx.startPullDownRefresh()
  },
  //下拉刷新
  onPullDownRefresh: function () {
    console.log('--------下拉加载--------')
    wx.showNavigationBarLoading() //在标题栏中显示加载
    //模拟加载
    setTimeout(function () {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 15000);
  }
})