uni-app IOS18.1.1系统 微信小程序端scroll-view滑动失效，麻烦尽快解决，复现代码已给出

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

uni-app IOS18.1.1系统 微信小程序端scroll-view滑动失效，麻烦尽快解决，复现代码已给出

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：正式

HBuilderX版本号：4.36

第三方开发者工具版本号：1.06.2409140

基础库版本号：3.6.6

项目创建方式：HBuilderX

示例代码：

<template>
  <view class="p-c">
    <view style="height: 40px;width: 100%;background-color: #f6131d">
      header
    </view>
    <scroll-view
      scroll-y="true"
      class="message-list"
      enable-flex
      :style="{'height': system.windowHeight - (40 + safeAreaInsetsBottom) + 'px'}"
    >
      <view
        v-for="(item, index) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]"
        :id="'' + index"
        :key="index"
        class="message-item"
      >
        {{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      system: null,
      safeAreaInsetsBottom: null
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: resp => {
        this.system = resp
        this.safeAreaInsetsBottom = resp?.safeAreaInsets?.bottom ?? 0
        console.log('safeAreaInsetsBottom=', this.safeAreaInsetsBottom)
      }
    })
  }
}
</script>

<style>
page {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    font-size: 28rpx;
    word-break: break-all;
    white-space: normal;
    color: $uni-text-color;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
</style>

<style scoped lang="scss">
.p-c {
    height: 100%;
    position: relative;
    background-color: #EFF1F5;
    padding-bottom: unset;
    .message-list {
        //height: 100%;
        //overflow-y: auto;
        padding: 0 20rpx;
        background-color: #EFF1F5;
        display: flex;
        flex-direction: column-reverse;
        .message-item {
            width: 100%;
            padding: 30px 0;
            margin-bottom: 20px;
            border: 1px solid #000;
        }
    }
}
</style>

Harmonyos Next教程
10 回复

有人处理吗


麻烦尽快看下问题解决吧

@DCloud_UNI_OttoJi @DCloud_UNI_WZF @DCloud_CHB @DCloud_UNI_yuhe

小程序上还是APP上或者是H5上？

微信小程序

把这两句注释掉就好了

确实可以了，因为我们需求是从下往上排列，其他机型没出现过这个问题，奇了怪了

回复 e***@foxmail.com: 应该是个BUG

或者把scroll-view上的enable-flex去掉

针对你提到的uni-app在微信小程序端（特别是在iOS 18.1.1系统）scroll-view滑动失效的问题，这里提供一些可能的解决方案和代码示例。首先，确保你的uni-app和微信开发者工具都是最新版本，因为旧版本可能包含未修复的bug。

1. 检查基础设置

确保你的scroll-view组件的基本属性设置正确，如scroll-y或scroll-x，以及是否设置了固定的高度或宽度。

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

2. 使用CSS Flexbox布局

有时，使用CSS Flexbox布局可以解决滚动问题。尝试给scroll-view的父元素设置display: flex;和相应的flex-direction。

<template>
  <view class="container">
    <scroll-view class="scroll-area" scroll-y="true">
      <view v-for="item in 100" :key="item" class="item">
        Item {{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.scroll-area {
  flex: 1;
  overflow-y: auto; /* For fallback in non-native scroll-view environments */
}
.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
</style>

3. 检查嵌套滚动

如果你的scroll-view嵌套在其他可滚动的容器中，可能会导致滚动冲突。确保没有其他滚动元素干扰scroll-view的滚动。

4. 尝试使用原生组件

在某些情况下，使用微信小程序的原生组件（如web-view内嵌一个具有滚动功能的页面）可能是一个解决方案，尽管这通常不是首选方法，因为它会牺牲一些性能和功能。

5. 调试和日志

使用微信开发者工具的调试功能，检查是否有任何错误或警告被抛出。此外，检查网络请求和组件加载是否有问题，这些都可能影响滚动性能。

6. 联系uni-app社区或微信官方

如果上述方法都不能解决问题，建议联系uni-app的开发者社区或微信小程序的官方支持，提供详细的复现步骤和代码，以便他们能更好地帮助你。

希望这些解决方案能帮助你解决scroll-view滑动失效的问题。如果问题仍然存在，请确保提供完整的复现步骤和代码，以便进一步分析。

回到顶部