一、enablePullDownRefresh
1、下拉刷新enablePullDownRefresh的支持
單頁面配置json文件
{
"enablePullDownRefresh": true
}
app.json配置(所有頁面都帶有下拉刷新功能)
{
"window": {
"enablePullDownRefresh": true
}
}
2、設置backgroundTextStyle
大家會發現別人的小程序下拉刷新是有三個點閃爍的動畫、自己設置的並沒有。這里面有個設置backgroundTextStyle的支持:
"backgroundTextStyle": "",支持 dark/light
3、停止stopPullDownRefresh
微信小程序還提供了停止下拉刷新的API:
https://developers.weixin.qq.com/miniprogram/dev/api/wx.stopPullDownRefresh.html
wx.stopPullDownRefresh()
二、onReachBottomDistance上拉觸底
1、頁面上拉觸底事件觸發時距頁面底部距離,單位為px。
(單頁面json配置,app.json的window配置中配置 全部頁面的上拉觸底)
"onReachBottomDistance": 50//默認值是50
2、在Page.onReachBottom里面進行渲染數據及查看
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
console.log("頁面上拉觸底事件的處理函數")
},
三、動態設置下拉背景字體、loading 圖的樣式
wx.setBackgroundTextStyle({
textStyle: 'dark' // 下拉背景字體、loading 圖的樣式為dark
})
四、動態設置窗口的背景色
wx.setBackgroundColor({
backgroundColor: '#ffffff', // 窗口的背景色為白色
})
<!--兼容ios-->
wx.setBackgroundColor({
backgroundColorTop: '#DC143C', // 頂部窗口的背景色為紅
backgroundColorBottom: '#00FA9A', // 底部窗口的背景色為綠
})