微信小程序頁面左右滑動與上下拉刷新的實現方案

關於上下拉刷新

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

page頁面上下拉刷新

• 下拉

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

• 上滑

上滑的觸發分兩種情況

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

scrollview上下拉刷新

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

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

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

頁面左右滑動

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

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

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

如果此時，你滑動你會發現每個tab下的頁面上下滑動都會一起滑動，爲了保證每個tab下的內容自己滑動，此時考慮使用scrollview進行封裝

哎呀page的onReachBottom失效了

這個時候你上拉你會發現不會再觸發onReachBottom方法，這個原因就在於前面所說的scrollview的滑動與page會衝突，那麼此時就需要觸發onReachBottom方法觸發的內容，與之相關的是scrollview的bindscrolltolower方法，重寫這個方法，並將onReachBottom方法內容提出單獨分裝，一起調用即可

哎呀，有的頁面可以在內容頁下拉刷新有的不可以

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

總結

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