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

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

1) 頁面無滾動區(qū)域時，可通過頁面json配置文件設(shè)置disableScroll:true禁止整個頁面滾動，從而取消橡皮筋效果。

{
  "disableScroll":true
}

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

2) 頁面有滾動區(qū)域，滾動區(qū)域通過view模擬實現(xiàn)，然后在頁面json配置文件設(shè)置disableScroll:true禁止整個頁面滾動，從而取消橡皮筋效果。

json文件配置
{
  "disableScroll":true
}

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

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

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

wxml滾動區(qū)域?qū)傩院褪录幚?，具體實現(xiàn)請點擊測試代碼鏈接
<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模擬實現(xiàn)滾動區(qū)域，scroll-view滾動更絲滑，不過每次滾動到底部或頂部的時候，再反向滑動時由于再次開啟scroll-view滾動會有操作卡頓的感覺，暫時沒想到好的解決方法，有解決的大佬希望提供一下想法，一起學(xué)習(xí)下。
測試代碼：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo3
 

IOS橡皮筋效果遇到的坑

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

2) 如果頁面頂部有置頂?shù)臋M向滾動區(qū)域scroll-view，當(dāng)頁面滾動到底部時繼續(xù)上拉會導(dǎo)致置頂頭部消失，松開回彈后頭部又會出現(xiàn)。
坑是社區(qū)里的朋友提出來的，我借了個iphone x 一預(yù)覽，我嚓，還是真是個奇坑！
微信官方回復(fù)已復(fù)現(xiàn)正在解決中… 不想繼續(xù)等下去的，暫時解決方法是
監(jiān)聽頁面的滾動區(qū)域，當(dāng)滾動到底部時設(shè)置頂部橫向滾動scroll-view的scroll-x=false來解決。

寫在最后

以上便是我在小程序開發(fā)中有關(guān)于ios橡皮筋回彈效果的分享，示例代碼已上傳github,可自行下載體驗。

https://github.com/YuniorZen/minicode-debug/tree/master/minicode01

目前微信官方雖說已經(jīng)著手解決(已兩年)此類bug，但哪吒說 我命由我不由天，所以還是我們開發(fā)者多分享些解決方案自救來的快。
分享方案如有問題還望不吝指出，沒有涉及到的坑也歡迎評論提出，一起學(xué)習(xí)和解決，后續(xù)也會基于此篇不斷更新總結(jié)。