微信小程序：enablePullDownRefresh、onReachBottomDistance 、動態設置窗口的背景色、動態設置下拉背景字體

1、enablePullDownRefresh

一、下拉刷新enablePullDownRefresh的支持

單頁面配置json文件

{
   "enablePullDownRefresh": true
}

複製代碼

app.json配置（全部頁面都帶有下拉刷新功能）

{
    "window": {
        "enablePullDownRefresh": true
    }
}
複製代碼

二、設置backgroundTextStyle 你們會發現別人的小程序下拉刷新是有三個點閃爍的動畫、本身設置的並無。這裏面有個設置backgroundTextStyle的支持:

"backgroundTextStyle": ""，支持 dark/light
複製代碼

三、中止stopPullDownRefresh

微信小程序還提供了中止下拉刷新的API: developers.weixin.qq.com/miniprogram…

wx.stopPullDownRefresh()
複製代碼

2、onReachBottomDistance上拉觸底

一、頁面上拉觸底事件觸發時距頁面底部距離，單位爲px。 （單頁面json配置，app.json的window配置中配置 所有頁面的上拉觸底）

"onReachBottomDistance": 50//默認值是50
複製代碼

二、在Page.onReachBottom裏面進行渲染數據及查看

/**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    console.log("頁面上拉觸底事件的處理函數")
  },
複製代碼

3、動態設置下拉背景字體、loading 圖的樣式

wx.setBackgroundTextStyle({
  textStyle: 'dark' // 下拉背景字體、loading 圖的樣式爲dark
})
複製代碼

4、動態設置窗口的背景色

wx.setBackgroundColor({
  backgroundColor: '#ffffff', // 窗口的背景色爲白色
})
<!--兼容ios-->
wx.setBackgroundColor({
    backgroundColorTop: '#DC143C', // 頂部窗口的背景色爲紅
    backgroundColorBottom: '#00FA9A', // 底部窗口的背景色爲綠
})
複製代碼