uni-app nvue中list组件在ios上点击到list最左边卡死无法滚动且右滑返回失效

uni-app nvue中list组件在ios上点击到list最左边卡死无法滚动且右滑返回失效

开发环境 版本号 项目创建方式
Mac 10.15.7 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.99

手机系统：iOS

手机系统版本号：iOS 16

手机厂商：苹果

手机机型：iphone xr

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：

<template v-for="(item,index) in 10">
    <cell >
        <view style="width: 750rpx;height: 150rpx;background: wheat;"><text>12345</text></view>
    </cell>
</template>

操作步骤：

<template v-for="(item,index) in 10">
    <cell >
        <view style="width: 750rpx;height: 150rpx;background: wheat;"><text>12345</text></view>
    </cell>
</template>

预期结果：

不管点击到哪里都应没影响

实际结果：

ios点击到屏幕最左侧list直接卡死无法滚动，且右滑返回也失效了

bug描述：

nvue中list组件在ios上一旦点击到list的最左边，list直接卡死无法滚动，右滑返回也直接失效,必现的

更多关于uni-app nvue中list组件在ios上点击到list最左边卡死无法滚动且右滑返回失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

一样了问题，安卓就没问题，ios一点击左上角左下角就会直接卡死有时候跳转到其他页面也会导致其他页面直接卡死

更多关于uni-app nvue中list组件在ios上点击到list最左边卡死无法滚动且右滑返回失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


遇到同样问题

在 uni-app 的 nvue 中，使用 list 组件时，如果在 iOS 上点击到 list 最左边导致卡死且右滑返回失效，可能是由于手势冲突或布局问题导致的。以下是一些可能的解决方案和排查步骤：

1. 检查 list 组件的布局

确保 list 组件的布局没有超出屏幕或与其他组件重叠。特别是在 iOS 上，list 组件的边缘可能会与系统手势区域发生冲突。

<template>
  <list class="list-container">
    <!-- list items -->
  </list>
</template>

<style scoped>
.list-container {
  width: 750rpx; /* 确保宽度正确 */
  height: 100%; /* 确保高度正确 */
}
</style>

2. 禁用 list 组件的边缘回弹效果

有时 iOS 的 list 组件边缘回弹效果可能会导致手势冲突。你可以尝试禁用回弹效果。

<template>
  <list class="list-container" :bounces="false">
    <!-- list items -->
  </list>
</template>

3. 检查 list 组件的事件处理

确保 list 组件的事件处理逻辑没有阻塞或干扰系统手势。特别是如果你在 list 组件中使用了 touch 事件，可能会导致手势冲突。

4. 使用 scroll-view 替代 list

如果 list 组件的问题无法解决，可以尝试使用 scroll-view 组件来替代 list，并手动处理列表项的渲染。

<template>
  <scroll-view class="scroll-container" scroll-y>
    <!-- list items -->
  </scroll-view>
</template>

<style scoped>
.scroll-container {
  width: 750rpx;
  height: 100%;
}
</style>

5. 检查 iOS 系统手势设置

确保 iOS 系统的右滑返回手势没有被禁用或冲突。你可以在 pages.json 中检查页面配置，确保没有禁用右滑返回。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "disableSwipeBack": false // 确保没有禁用右滑返回
      }
    }
  ]
}

6. 更新 uni-app 版本

确保你使用的 uni-app 版本是最新的，因为官方可能会修复一些已知的 bug 或兼容性问题。

7. 调试和日志

在出现问题的代码段中添加日志，查看是否有异常抛出或卡死的具体位置。可以使用 console.log 或 uni.showToast 来辅助调试。

<template>
  <list class="list-container" [@touchstart](/user/touchstart)="handleTouchStart">
    <!-- list items -->
  </list>
</template>

<script>
export default {
  methods: {
    handleTouchStart() {
      console.log('Touch start');
    }
  }
}
</script>
回到顶部