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

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

---

问题现象

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

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

const TicketRecordsPage = () => {
  const revenueData = new Array(10).fill(0).map((_, i) => i)
  return (
    
      title
      
        
          {
            revenueData.map((x) => {
              return {x}
            })
          }
        
      
    
  );
}

.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上运行的效果

希望csdn有一天支持github的视频

希望csdn有一天支持github的视频

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

原因及解决方案

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

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

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

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

WebView.scrollView.bounces = NO;

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

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

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

 TicketRecordsPage.config = {
     
   disableScroll: true
 }

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

---

参考文档：

• 怎么禁止Ios的橡皮筋效果 - Taro 官方社区让每一次交流被沉淀
• 小程序禁止页面拉动（非禁止小下拉刷新）_D.uccky的博客-CSDN博客_小程序禁止页面下拉
• 页面配置 - 微信开放文档
• 小程序取消橡皮筋回弹效果解决方案及坑总结（持续更新） - 微信开放社区
• ios - Stop UIWebView from “bouncing” vertically? - Stack Overflow

---

本文会经常更新，请阅读个人博客原文： https://xinyuehtx.github.io/ ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

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