小程式 分屏載入&下拉重新整理

劉清朗發表於2018-04-26

小程式 分屏載入&下拉重新整理

微信小程式的官方文件一直被大家吐槽 api 一點即過,不清不楚

直接奔問題

小程式的元件有個 它可以獲取到當前滾動適口的滾去高度,繫結滾動到底部的觸發事件,滾動到頂部的觸發事件

  • bindscrolltoupper(頂部)
  • bindscrolltolower(底部)
  • bindscroll (滾動觸發)

那有人會覺的直接包一個<scroll-view> 繫結一下 bindscrolltolower

就可以實現底部分頁載入 沒錯確實可以實現

但當我們面對下一個需求的時候,發現自己錯了

下拉重新整理

下拉重新整理 官方提供三個api

onPullDownRefresh 需要在 configwindow選項中開啟

enablePullDownRefresh:true
複製程式碼

舉例子:

Page({
    onPullDownRefresh: function(){
        wx.stopPullDownRefresh()
    }
})
複製程式碼

問題來了

onPullDownRefresh<scroll-view> 不相容 下拉重新整理根本不會生效

難道只有自己手動去模擬

好,發現了一個新的api

可在 configwindow選項中配置

"onReachBottomDistance": 120 
複製程式碼

ps:距離底部的多高 觸發方法

onReachBottom: function () {
    xxxxxxxxx
    xxxxx
    xxx
},
複製程式碼
如果錯誤地方,請留言指出~及時更正 謝謝~

相關文章