微信小程序在ios中下拉出现“橡皮筋”效果

今天和大家聊一聊微信小程序在ios中下拉出现“橡皮筋”效果

问题现象

话不多说，先看代码（使用taro编写）。

代码很简单，一个flex的容器+一个允许进行下拉刷新的ScrollView，就组成了一个最简demo

jsx

const TicketRecordsPage = () => {
  const revenueData = 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 >
  );
}

css

.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;
}

下面两个视频，一个是在安卓上运行的效果，一个是在ios上运行的效果

可以看到，在安卓上下拉是符合预期的，但是在iso上，拖动特定区域就会出现title框也跟着偏移的“橡皮筋”效果。

原因及解决方案

为什么ios会有这样的现象呢？

查看资料发现，这个回弹效果是ios的UIWebView组件的特性。

而小程序利用了移动端的原生组件，所以继承了这种特性

在ios 5.x+可以使用下面的方式进行处理

WebView.scrollView.bounces = NO;

而对于小程序，官网提供了页面配置项disableScroll=false进行禁止。

当然，目前大部分同学可能使用的是taro进行小程序开发（例如我文中的例子）。

在taro中，可以对页面组件设置一个config属性，从而实现页面配置。

javascript

 TicketRecordsPage.config = {
   disableScroll: true
 }

这样，ios上就可以获得和安卓上等同的下拉效果了

参考文档：

问题现象 ​

原因及解决方案 ​

问题现象

原因及解决方案