uni-app ios端会出现页面整个无法滑动、无法点击的情况

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app ios端会出现页面整个无法滑动、无法点击的情况

操作步骤:

  • 首页 -> 滑动半屏 -> 松开 -> 进入列表页 -> 随便切换一些选项 -> 轻微的滚动一点

预期结果:

  • 希望能正常使用

实际结果:

  • 页面无法滑动和点击,卡死了。

bug描述:

  • 在iPhone已测到的手机上(iPhone7Plus、iPhone13、iPhone12)系统15、16、17都有,都会出现页面卡死的情况。正常是无规律的出现。经过测试发现了一种出现规律很大的情况,能有(80%以上概率),首页是tab是nvue页面,然后进入一个vue列表页面,轻轻滑动就会出现整个页面卡死。Android上没问题。iOS如视频操作: 演示视频1

项目信息表

项目信息 描述
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 MacOs Monterey12.7.6 (21H1320)
HBuilderX 正式
HBuilderX版本号 4.24
手机系统 iOS
手机版本号 iOS 15
手机厂商 苹果
手机机型 iPhone7Plus、iPhone13、iPhone12
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

11 回复

列表页的数据多么?


不多,就十几条数据

回复 b***@163.com: 列表用的啥组件么?

我今天也遇到了,没有改过任何代码,今天自定义基座打包后ios页面无法点击,也不能滑动

官方让提供简单测试demo工程

你是不是在list 或者scroll-view上面绑定了touch事件

不是这个原因

回复 b***@163.com:我之前遇到过和你视频里一样的情况, 最后发现是我上面说的导致的, 不一定是这个页面的, 其他地方绑定了,也会这样

自己检查下点击后是不是禁止页面滚动了,或者是不是高度设置的不对

没有禁止,高度是100%

在uni-app开发过程中,遇到iOS端页面整个无法滑动、无法点击的情况,通常可能是由于视图渲染、事件绑定或者内存管理等方面的问题引起的。下面提供几个可能的代码案例和排查方向,帮助你定位和解决这一问题。

1. 检查视图渲染问题

确保你的页面布局没有导致渲染异常。例如,一个全屏的cover-view可能会阻止其他视图的交互。

<!-- 示例代码,避免使用全屏覆盖的view -->
<template>
  <view>
    <!-- 不要让 cover-view 覆盖整个屏幕 -->
    <cover-view style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;">
      Cover View
    </cover-view>
    <scroll-view>
      <!-- 你的可滚动内容 -->
      <view v-for="item in items" :key="item.id">
        {{ item.name }}
      </view>
    </scroll-view>
  </view>
</template>

2. 检查事件绑定

确保事件绑定正确无误,没有因为某些条件导致事件处理器未正确绑定。

// 示例代码,确保事件绑定正确
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    handleScroll(e) {
      console.log('Scroll event:', e);
    },
    handleClick(e) {
      console.log('Click event:', e);
    }
  },
  mounted() {
    this.$refs.scrollView.addEventListener('scroll', this.handleScroll);
    // 确保点击事件绑定到正确的元素
    this.$refs.clickableElement.addEventListener('click', this.handleClick);
  }
};

3. 内存和性能优化

页面元素过多或复杂的动画可能会导致内存占用过高,从而影响页面交互。

// 示例代码,按需加载和清理数据
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    loadMoreItems() {
      // 假设这是一个分页加载数据的函数
      // 在加载更多数据前,可以清理不再显示的数据以节省内存
      this.items = this.items.slice(0, 100).concat(newItems); // 仅保留前100项,加载新数据
    }
  }
};

4. 检查iOS特定问题

有时候,iOS系统的一些特定行为或bug可能导致问题。可以查阅uni-app和iOS的相关文档或社区,看看是否有已知的兼容性问题。

总结

上述代码案例和排查方向仅作为参考,实际问题的解决需要根据具体的应用场景和代码实现来定位。如果问题依旧存在,建议开启uni-app的调试模式,查看控制台是否有错误信息,或者尝试简化页面布局和逻辑,逐步排查问题所在。

回到顶部