小程序取消橡皮筋回彈效果解決方案及坑總結

發表時間：2021-3-26

發布人：葵宇科技

浏覽次數：202

提到ios系統的橡皮筋效果，作為開發者是又愛又恨，有想要這個(gè)效果又有不想要的，無奈的是卻沒有一個(gè)簡單的開關(guān)來設置這個(gè)效果是否開啟。
最近在開發小程序時也遇到有關(guān)于ios橡皮筋回彈的問(wèn)題，這裡分兩部分（取消橡皮筋回彈效果和(hé)因為這個(gè)效果遇到的坑）和(hé)大家分享一下(xià)。

取消IOS橡皮筋回彈效果的解決方案

1) 頁面無滾動(dòng)區域時，可(kě)通(tōng)過頁面json配置文(wén)件設置disableScroll:true禁止整個(gè)頁面滾動(dòng)，從而取消橡皮筋效果。

{
  "disableScroll":true
}

測試代碼：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo1

2) 頁面有滾動(dòng)區域，滾動(dòng)區域通(tōng)過view模拟實現，然後在頁面json配置文(wén)件設置disableScroll:true禁止整個(gè)頁面滾動(dòng)，從而取消橡皮筋效果。

json文(wén)件配置
{
  "disableScroll":true
}

view元素模拟實現滾動(dòng)樣式
{
  height: calc(100vh - 120rpx); //高度必須是固定的值
  overflow-y: auto;
}

不足之處在于view元素模拟的滾動(dòng)區域滾動(dòng)時不夠連貫，沒有scroll-view那種原生絲滑般的感覺。
測試代碼：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo2

3) 頁面有滾動(dòng)區域，滾動(dòng)區域使用scroll-view,這時通(tōng)過disableScroll則無法實現，嘗試設置一下(xià)scroll-view的scroll-y="{{false}}"，上拉或下(xià)拉時居然不再觸發橡皮筋的回彈啦，當然滾動(dòng)區域也不能滾動(dòng)。
小腦袋動(dòng)一動(dòng)，解決方法有啦！
通(tōng)過設置一個(gè)變量scrollY動(dòng)态控制滾動(dòng)區域的滾動(dòng)從而阻止回彈。
監聽bindscrolltoupper\bindscrolltolower當scroll-view區域滾動(dòng)到頂部或底部時候設置scrollY:false來關(guān)閉頁面滾動(dòng)，從而阻止回彈。
監聽bindtouchstart\bindtouchmove 當用戶反方向滑動(dòng)的時候設置scrollY:true，再次開啟頁面滾動(dòng)。

wxml滾動(dòng)區域屬性和(hé)事件處理，具體實現請點擊測試代碼鍊接
<scroll-view scroll-y="{{scrollY}}" class="list" upper-threshold="5" lower-threshold="5"
bindscrolltoupper="bindscrolltoupper" 
bindscrolltolower="bindscrolltolower" 
bindtouchstart="touchstart"
bindtouchmove="touchmove">
<view class="list-item" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view>
</scroll-view>

相對view模拟實現滾動(dòng)區域，scroll-view滾動(dòng)更絲滑，不過每次滾動(dòng)到底部或頂部的時候，再反向滑動(dòng)時由于再次開啟scroll-view滾動(dòng)會有操作卡頓的感覺，暫時沒想到好的解決方法，有解決的大佬希望提供一下(xià)想法，一起學習下(xià)。
測試代碼：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo3

IOS橡皮筋效果遇到的坑

1) 操作左滑删除組件時上下(xià)移動(dòng)，會觸發橡皮筋效果導緻頁面抖動(dòng)的問(wèn)題
這個(gè)坑的嚴重程度看設計師(shī)的意願了，反正我們團隊目前是需要解決的，方案類似取消橡皮筋解決方案的第三種
在左滑的時候關(guān)閉scroll-view的滾動(dòng)，取消時再次開啟滾動(dòng)

2) 如(rú)果頁面頂部有置頂的橫向滾動(dòng)區域scroll-view，當頁面滾動(dòng)到底部時繼續上拉會導緻置頂頭部消失，松開回彈後頭部又會出現。
坑是社區裡的朋友提出來的，我借了個(gè)iphone x 一預覽，我嚓，還是真是個(gè)奇坑！
微信官方回複已複現正在解決中(zhōng)… 不想繼續等下(xià)去的，暫時解決方法是
監聽頁面的滾動(dòng)區域，當滾動(dòng)到底部時設置頂部橫向滾動(dòng)scroll-view的scroll-x=false來解決。