uni-app App端 iOS13下无法滚动的解决方案

uni-app App端 iOS13下无法滚动的解决方案

方式1. 升级到HBuilderX 最新版

如果是本地打包，或cli项目，同样升级到最新的匹配版本
重新打包ipa包，提交Appstore审核
对于老用户，如果你之前留有升级策略控制，那么应该判断如果是iOS13则强制引导用户去Appstore升级。

此方式除了解决不能滚动的问题，还解决了其他一些iOS适配问题，如状态栏前景颜色、状态栏高度获取等细节。

对于使用非自定义组件编译模式的应用，升级HBuilderX还不够，还需要升级适配自定义组件编译模式，否则iOS13上还是无法滚动。

方式2. 不升级HBuilderX或通过wgt更新处理此问题

如果你的app无法短时间内升级HBuilderX，或者希望用wgt更新来强迫用户升级，可以使用如下方式

  1. 在 HBuilderX 安装目录搜索并找到 uniappview.html 文件（Mac：HBuilderX.app/Contents/HBuilderX/plugins/weapp-tools/template/common/uniappview.html；Windows：HBuilderX\plugins\weapp-tools\template\common__uniappview.html）
  2. 打开 uniappview.html 文件，进行编辑
  3. 在 <script src="__uniappes6.js"></script> 前插入如下代码
<script>  
(function() {  
if (typeof plus === 'object' && plus.os.name === 'iOS') {  
  var time = 0  
  document.addEventListener('touchstart', function(event) {  
    time = Date.now()  
  }, {  
    passive: true  
  })  
  var webview = plus.webview.currentWebview()  
  webview.__origin_getStyle = webview.getStyle  
  webview.getStyle = function() {  
    if (Date.now() - time > 100) {  
      return this.__origin_getStyle()  
    }  
  }  
}  
})()  
</script>

插入后效果：

Image

修改完成后，重新编译项目即可。可在HBuilderX发行菜单中制作wgt资源进行热更新。

这种方式仅作为临时使用，解决iOS13不能滚动的问题。其他有些细节体验问题，还需完整升级HBuilderX、重新打ipa包提交才能解决。

此方案适用于由于某些原因不能升级 HBuilderX 的用户，用以临时解决 iOS13 上页面无法滚动的问题，请大家尽快升级新版 HBuilderX。

非自定义组件模式，如果不能及时升级为自定义组件模式，也可使用方案2来解决滚动问题。

升级HBuilderX 2.3新版可能会遇到其他问题，见社区公告。


更多关于uni-app App端 iOS13下无法滚动的解决方案的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app App端 iOS13下无法滚动的解决方案的实战教程也可以访问 https://www.itying.com/category-93-b0.html


针对uni-app在iOS 13下遇到的无法滚动问题，这通常与页面的滚动容器或者滚动行为有关。以下是一些可能帮助解决问题的代码示例和调试思路，主要聚焦于调整页面的滚动行为和优化滚动容器的设置。

1. 检查滚动容器

确保你的滚动容器（如<scroll-view>组件）正确设置。以下是一个基本的<scroll-view>使用示例：

<template>
  <view>
    <scroll-view scroll-y="true" style="height: 100vh;">
      <view v-for="item in 100" :key="item" class="scroll-item">
        Item {{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style>
.scroll-item {
  height: 50px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
}
</style>

2. 使用CSS Flex布局确保容器高度

有时候，滚动问题可能是由于容器高度计算不正确导致的。确保使用Flex布局或其他布局方式明确指定容器的高度：

html, body, #app, .page-container {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.scroll-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

3. 检查外层容器的样式

外层容器如果设置了overflow: hidden;或者固定高度，可能会阻止内部内容的滚动。确保这些设置不会影响到<scroll-view>组件的滚动行为。

4. 使用-webkit-overflow-scrolling

在iOS设备上，可以使用-webkit-overflow-scrolling: touch;来优化滚动性能，尽管这通常不会解决滚动问题，但值得一试：

.scroll-view {
  -webkit-overflow-scrolling: touch;
}

5. 调试和日志

使用uni-app的开发者工具进行真机调试，检查是否有相关的警告或错误信息。同时，可以在滚动事件中添加日志，查看滚动事件是否被正确触发：

methods: {
  onScroll(e) {
    console.log('Scroll event triggered', e);
  }
}

在<scroll-view>组件中添加@scroll="onScroll"事件监听。

总结

以上代码示例和调试思路主要针对uni-app在iOS 13下滚动问题的通用解决方案。具体问题可能需要根据实际情况调整。如果问题依然存在，建议检查uni-app和依赖库的版本，确保没有已知的bug影响滚动功能。

回到顶部