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

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

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

{
  "disableScroll":true
}

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

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

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

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

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

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

wxml滾動(dòng)區(qū)域?qū)傩院褪录幚?，具體實(shí)現(xiàn)請(qǐng)點(diǎn)擊測(cè)試代碼鏈接
<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>  

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

IOS橡皮筋效果遇到的坑

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

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

寫在最后

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

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

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