uni-app scroll-view 在app端安卓系统下无法横向滚动

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

uni-app scroll-view 在app端安卓系统下无法横向滚动

产品分类

uniapp/App

开发环境与版本信息

项目 详情
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 11
HBuilderX类型 正式
HBuilderX版本号 4.45
手机系统 Android
手机系统版本号 Android 14
手机厂商 魅族
手机机型 20pro
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码

<template>
<view class="x">
<scroll-view class="scroll-view_H" scroll-x="true" direction="horizontal" @scroll="handleScroll">
<view id="demo1" class="scroll-view-item_H v1">A</view>
<view id="demo2" class="scroll-view-item_H v2">B</view>
<view id="demo3" class="scroll-view-item_H v3">C</view>
</scroll-view>
</view>
</template>

<script>
export default {
methods: {
handleScroll(e) {
console.log(e);
}
}
</script>

<style lang="scss" scoped>
.x {
width: 100%;
height: auto;
}
.scroll-view_H {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
height: 350px;
box-sizing: border-box;
background-color: green;
white-space: nowrap;
}

.scroll-view-item_H {  
display: inline-block;  
width: 100%;  
height: 300px;  
line-height: 300px;  
text-align: center;  
font-size: 36px;  
}  
.v1 {  
background-color: pink;  
}  
.v2 {  
background-color: red;  
}  
.v3 {  
background-color: green;  
}  
</style>

操作步骤

在子页面中使用scrollview无法滚动

预期结果

可以横向滚动

实际结果

不能横向滚动

bug描述

横向滚动滚动不了


Harmonyos Next教程
1 回复

在处理 uni-app 中 scroll-view 组件在安卓系统下无法横向滚动的问题时，通常是因为某些属性设置不正确或者样式冲突导致的。下面是一个基础的代码示例，展示如何正确配置 scroll-view 组件以实现横向滚动，并附带一些常见的样式调整建议。

1. 基础配置

首先，确保你的 scroll-view 组件设置了正确的 scroll-x 属性，并且内容宽度超过了容器的宽度。

<template>
  <view>
    <scroll-view scroll-x="true" style="width: 100%; height: 200px;">
      <view class="scroll-item" v-for="(item, index) in items" :key="index">
        {{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    };
  }
};
</script>

<style scoped>
.scroll-item {
  display: inline-block;
  width: 200px;
  height: 100%;
  text-align: center;
  line-height: 200px;
  border: 1px solid #000;
  box-sizing: border-box;
}
</style>

2. 样式调整

确保 .scroll-item 元素的宽度足够大，使得总宽度超过 scroll-view 容器的宽度。同时，使用 inline-block 或 flex 布局来确保子元素在一行内显示。

3. 安卓特定问题处理

如果上述基础配置在安卓上仍然无法滚动，可能是由于某些安卓设备的特定问题或者样式冲突。可以尝试以下步骤：

  • 检查外部容器：确保 scroll-view 的外部容器没有设置 overflow: hidden 或其他影响滚动的样式。
  • 使用 Flexbox：尝试使用 Flexbox 布局替代 inline-block，有时可以解决布局问题。
<style scoped>
.scroll-container {
  display: flex;
  width: 100%;
  height: 200px;
}

.scroll-item {
  flex: 0 0 200px;
  height: 100%;
  text-align: center;
  line-height: 200px;
  border: 1px solid #000;
  box-sizing: border-box;
}
</style>

4. 调试

  • 使用开发者工具模拟安卓设备，查看是否有警告或错误信息。
  • 在真机上测试，确保所有样式和逻辑都正确无误。

通过上述步骤，你应该能够解决 uni-app 中 scroll-view 在安卓系统下无法横向滚动的问题。如果问题依然存在，可能需要检查更具体的样式冲突或代码逻辑问题。

回到顶部