關(guān)于上下拉刷新

微信小程序官方建議使用page的上下拉刷新，那么什么時候會觸發(fā)上下拉刷新呢

page頁面上下拉刷新

下拉.jpg

• 下拉

通過向下滑動頁面即可觸發(fā)page頁面的onPullDownRefresh方法

• 上滑

上滑的觸發(fā)分兩種情況

• 內(nèi)容不能充滿page
  • 此時你第一次上拉會觸發(fā)一次onReachBottom
    • 解析：
    • 微信這么做的原因是可以讓我們在這里進行一次處理提醒用戶
  • 再次上拉不會觸發(fā)
• 內(nèi)容充滿page
  • 通過上滑即可觸發(fā)page頁面的onReachBottom方法

scrollview上下拉刷新

scrollview的上下拉刷新是通過方法bindscrolltoupper與bindscrolltolower，更過相關(guān)的細節(jié)請參考微信小程序scrollview組件

注：scrollview的上下拉刷新并沒有頁面下拉滑動長條那種顯示，只是單純的觸發(fā)，如果你想有那種效果需要自己去實現(xiàn)（基于onScroll方法)

想必這也是微信小程序建議使用page刷新的原因

頁面左右滑動

左右滑動.jpg

當然可以使用手勢進行手勢滑動，單如果你知道有個神奇的組件叫做swiper我想你會考慮使用swiper而不是自己去touch

swiper組件的使用請參考微信小程序swiper組件

此時頁面布局.jpg

tab下面的每個頁面的滑動不一樣問題

如果此時，你滑動你會發(fā)現(xiàn)每個tab下的頁面上下滑動都會一起滑動，為了保證每個tab下的內(nèi)容自己滑動，此時考慮使用scrollview進行封裝

哎呀page的onReachBottom失效了

這個時候你上拉你會發(fā)現(xiàn)不會再觸發(fā)onReachBottom方法，這個原因就在于前面所說的scrollview的滑動與page會沖突，那么此時就需要觸發(fā)onReachBottom方法觸發(fā)的內(nèi)容，與之相關(guān)的是scrollview的bindscrolltolower方法，重寫這個方法，并將onReachBottom方法內(nèi)容提出單獨分裝，一起調(diào)用即可

哎呀，有的頁面可以在內(nèi)容頁下拉刷新有的不可以

這點的方案目前暫未實現(xiàn)，如果路過的大佬們有解決方案請留言提出或者聯(lián)系我，發(fā)到我的郵箱，小弟在此謝過
為何會有這樣的原因呢？
還是scrollview的滑動與page沖突問題，如果你仔細閱讀scrollview的文檔你會發(fā)現(xiàn)scrollview的滑動會屏蔽page的onPullDownRefresh方法，此時需要我們從頂部下拉接口。那么為何有的頁面可以下拉呢，這是因為scrollview的內(nèi)容不足填充整個頁面，此時它不與page沖突可以下拉。

總結(jié)

微信小程序在實踐上不必原生、RN還是有很多限制，由于其屬于輕量級的開發(fā)工具還是很方便，畢竟人家定位就是小程序~