微信小程序：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', // 底部窗口的背景色为绿
})
复制代码