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

问题现象

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

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

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

.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属性，从而实现页面配置。

 TicketRecordsPage.config = {
   disableScroll: true
 }

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

参考文档：

本文会经常更新，请阅读原文： https://xinyuehtx.github.io/post/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9C%A8ios%E4%B8%AD%E4%B8%8B%E6%8B%89%E5%87%BA%E7%8E%B0-%E6%A9%A1%E7%9A%AE%E7%AD%8B-%E6%95%88%E6%9E%9C.html ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

知识共享许可协议 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名黄腾霄（包含链接： https://xinyuehtx.github.io ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 。

相关文章