uni-app iOS 系统为13.5时 list 组件设置 bounce 为 false 时无法滚动

uni-app iOS 系统为13.5时 list 组件设置 bounce 为 false 时无法滚动

项目属性 值
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 macOS Big Sur 11.2.3
HBuilderX类型 正式
HBuilderX版本号 3.1.22
手机系统 iOS
手机系统版本号 iOS 13.4
手机厂商 苹果
手机机型 iPhone 6s
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
  <list class="scroll" id="parent" :bounce="false" :fix-freezing="true">  
    <cell ref="header">  
      <view class="card" v-for="idx in 10" :key="idx">  
        <text>{{ idx }}</text>  
      </view>  
    </cell>  
    <cell :style="{ height }">  
      <hbb-swiper-bar :names="['页面A', '页面B', '页面C']" :current="current" @change="onChange" />  
      <swiper style="flex: 1" :current="current" @change="onSwiper" @animationfinish="onSwiper">  
        <swiper-item @appear="onEffects(0)">  
          <hbb-waterfall ref="page0" :bounce="false" :fix-freezing="true" />  
        </swiper-item>  
        <swiper-item>  
          <hbb-waterfall ref="page1" :bounce="false" :fix-freezing="true" />  
        </swiper-item>  
        <swiper-item>  
          <hbb-waterfall ref="page2" :bounce="false" :fix-freezing="true" />  
        </swiper-item>  
      </swiper>  
    </cell>  
  </list>  
</template>  

<script>  
import { getRefRect } from './weex'  

const sys = uni.getSystemInfoSync()  

export default {  
  data() {  
    return {  
      current: 0,  
      height: sys.windowHeight - sys.statusBarHeight, // 可视高度 - 状态栏高度  
    }  
  },  
  async mounted() {  
    const rect = await getRefRect(this.$refs.header)  
    this.headerHeight = rect.height - sys.statusBarHeight // 头部高度 - 状态栏高度  
    this.onEffects(this.current) // 问题1：此处设置无效，因为 waterfall 不在可视区域内  
  },  
  methods: {  
    onChange(idx) {  
      this.onEffects(idx)  
      if (this.current === idx) return  
      this.current = idx  
    },  
    onSwiper(e) {  
      const idx = e.detail.current  
      this.onChange(idx)  
    },  
    onEffects(idx) {  
      const page = this.$refs[`page${idx}`]  
      page.setEffects('parent', this.headerHeight)  
      console.log('setEffects', idx, this.headerHeight)  
    },  
  },  
}  
</script>  

<style lang="scss" scoped>  
.scroll {  
  background: #fff;  
}  

.card {  
  align-items: center;  
  justify-content: center;  
  margin: 30rpx;  
  margin-bottom: 0;  
  width: 690rpx;  
  height: 200rpx;  
  border-radius: 10rpx;  
  background: rgba(red, 0.1);  
}  
</style>

操作步骤：

  • iOS模拟器运行demo项目

预期结果：

  • 可以滚动

实际结果：

  • 不可以滚动

bug描述：

  • iOS版本为13.5的时候， list-swiper-waterall 结构无法滚动
    1. 我mac上用模拟器跑 13.5的时候能够稳定复现问题
    2. 目前接收到的用户反馈无法滚动问题，基本都是13.5 和 13.6，14以上版本没这个问题
    3. 已重新上传了完整demo项目，可直接运行查看
    4. iOS 14.5 上模拟器和真机运行都是没问题的

文件下载：


更多关于uni-app iOS 系统为13.5时 list 组件设置 bounce 为 false 时无法滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

没有对应的设备，在 13.4 的模拟器测试没有复现问题，有一点需要注意：bounce 不支持动态修改，如果动态修改就会出现无法滚动的问题

更多关于uni-app iOS 系统为13.5时 list 组件设置 bounce 为 false 时无法滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


list + swiper + list or waterfall 这种情况可能会出现，因为这类视图在iOS端都是属于滚动视图，如果不想要 bounce 的时候需要将这类滚动视图都统一设置为 false 或 true ，设置的不一样也可能会有问题哦

回复 DCloud_iOS_XHY: 我重新编辑了问题，传了demo项目，本地模拟器可以稳定复现问题，麻烦排查下

使用你的demo复现问题了，确实是系统的差异问题，解决方案：判断系统版本如果小于 iOS14 waterfall 的 bounce 设置为 true 就可以了，其他的地方不需要动

这是一个已知的iOS 13.5特定版本下的nvue list组件兼容性问题。当list组件设置bounce="false"时，在iOS 13.5-13.6版本中确实会出现滚动失效的情况。

问题原因： iOS 13.5系统中WebKit内核在处理滚动容器时，当禁用回弹效果（bounce）后，可能会错误地阻止正常的滚动事件传递。

解决方案：

  1. 临时方案（推荐）： 将bounce属性设置为true，这是最直接的解决方法：

    <list class="scroll" id="parent" :bounce="true" :fix-freezing="true">

  2. CSS替代方案： 如果必须禁用回弹效果，可以通过CSS模拟：

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

  3. 版本检测方案： 动态设置bounce属性，仅在iOS 13.5-13.6版本中启用bounce：

    const system = uni.getSystemInfoSync()
const isIOS13_5_6 = system.platform === 'ios' && 
                   system.system.includes('13.5') || 
                   system.system.includes('13.6')

// 在模板中
<list :bounce="isIOS13_5_6 ? true : false">
回到顶部