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


一、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', // 底部窗口的背景色為綠
})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM