今天和大家聊一聊微信小程序在ios中下拉出現(xiàn)“橡皮筋”效果

問(wèn)題現(xiàn)象

話不多說(shuō)，先看代碼（使用taro編寫(xiě)）。

代碼很簡(jiǎn)單，一個(gè)flex的容器+一個(gè)允許進(jìn)行下拉刷新的ScrollView，就組成了一個(gè)最簡(jiǎn)demo

const TicketRecordsPage = () => {
  const revenueData = http://www.wxapp-union.com/new Array(10).fill(0).map((_, i) => i)
  return (
    <View className={styles['root']}>
      <View >title</View>
      <View className={styles['container']}>
        <ScrollView className={styles['viewer']} scrollY enableFlex
          refresher-enabled={true} lower-threshold={100} >
          {
            revenueData.map((x) => {
              return <View>{x}</View>
            })
          }
        </ScrollView>
      </View>
    </View >
  );
}

.root {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .container {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    position: relative;
    width: 100%;

    .viewer {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
    }

  }
}

View {
  width: 100%;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  line-height: 100px;
}

下面兩個(gè)視頻，一個(gè)是在安卓上運(yùn)行的效果，一個(gè)是在ios上運(yùn)行的效果

 可以看到，在安卓上下拉是符合預(yù)期的，但是在iso上，拖動(dòng)特定區(qū)域就會(huì)出現(xiàn)title框也跟著偏移的“橡皮筋”效果。

原因及解決方案

為什么ios會(huì)有這樣的現(xiàn)象呢？

查看資料發(fā)現(xiàn)，這個(gè)回彈效果是ios的UIWebView組件的特性。

而小程序利用了移動(dòng)端的原生組件，所以繼承了這種特性

在ios 5.x+可以使用下面的方式進(jìn)行處理

WebView.scrollView.bounces = NO;

而對(duì)于小程序，官網(wǎng)提供了頁(yè)面配置項(xiàng)disableScroll=false進(jìn)行禁止。

當(dāng)然，目前大部分同學(xué)可能使用的是taro進(jìn)行小程序開(kāi)發(fā)（例如我文中的例子）。

在taro中，可以對(duì)頁(yè)面組件設(shè)置一個(gè)config屬性，從而實(shí)現(xiàn)頁(yè)面配置。

 TicketRecordsPage.config = {
   disableScroll: true
 }

這樣，ios上就可以獲得和安卓上等同的下拉效果了