小程序下拉刷新 詳解

下拉刷新配置：

 

app.json
{
  "pages": [
    //注冊小程序中的頁面
  ],
  "window": {
    //設置小程序的狀態欄、導航條、標題、窗口背景色
  },
  "tabBar": {
    //指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面
  },
  "networkTimeout": {
    //設置各種網絡請求的超時時間
  },
  "debug": true//可以在開發者工具中開啟 debug 模式
}


page.json//page.json相當於app.json中的window
{
  "navigationBarBackgroundColor": "#ffffff",//導航欄背景顏色
  "navigationBarTextStyle": "black",//導航欄標題顏色，僅支持 black/white
  "navigationBarTitleText": "微信接口功能演示",//導航欄標題文字內容
  "backgroundColor": "#eeeeee",//下拉窗口的背景色
  "backgroundTextStyle": "light"//下拉背景字體、loading 圖的樣式，僅支持 dark/light
  "enablePullDownRefresh": true//是否開啟下拉刷新
  "disableScroll": false//設置為 true 則頁面整體不能上下滾動；只在 page.json 中有效，無法在 app.json 中設置該項
}

下拉刷新
在json文件中配置enablePullDownRefresh為true(app.json中在window中設置enablePullDownRefresh,此效果作用於全局),下面兩種設置方法只寫一個就行了
第一種全局：  app.json
{
    "window": {
      "enablePullDownRefresh":true
    },
}
//第二種  單個單個配置：
index.json
{
     "enablePullDownRefresh": true
}
---------------------------------------------------------
//然后  在js文件中實現onPullDownRefresh方法,在網絡請求完成后調用wx.stopPullDownRefresh()來結束下拉刷新

//index.js
Page({
    onPullDownRefresh: function(){
        wx.request({
            url: '',
            data: {},
            method: 'GET',
            success: function (res) {},
            fail: function (res) {},
            complete: function (res) {
                wx.stopPullDownRefresh();
            }
        })
    }
})

 

想在 標題欄  出現動畫  那很簡單：

 

//下拉刷新
  onPullDownRefresh:function()
  {
    wx.showNavigationBarLoading() //在標題欄中顯示加載
 
    //模擬加載
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加載
      wx.stopPullDownRefresh() //停止下拉刷新
    },1500);
  },

 

本文是整合了別人的兩篇文章：（謝謝你們的建議）

qq: 635612275

https://www.jianshu.com/p/1de223bf10e5

https://blog.csdn.net/haibo0668/article/details/80668915