uni-app scroll-view 无法横向滚动

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

uni-app scroll-view 无法横向滚动

产品分类

uniapp/App

开发环境、版本号、项目创建方式

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

示例代码

<scroll-view :scroll-x="true" :direction="'horizontal'" class="c2" style="width: 300px;background-color: aqua;height: 200px;">
    <view class="i" style="width: 100px;margin-right: 120px;background-color: red;">
        <text>sdsds</text>
    </view>
    <view class="i" style="width: 100px;margin-right: 120px;background-color: red;">
        <text>sdsds</text>
    </view>
    <view class="i" style="width: 100px;margin-right: 120px;background-color: red;">
        <text>sdsds</text>
    </view>
</scroll-view>

操作步骤

无法横向滚动

预期结果

可以横向滚动

实际结果

不能横向滚动

bug描述

无法横向滚动


Harmonyos Next教程
9 回复

样式都不对啊，你至少在scroll-view上加个display: flex;


<template> <view> <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120"> <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 setup lang="ts">
</script> <style lang="scss" scoped>
</style>

我这试了可以滚动

回复 蔡cai: 我用官方的例子试了一下在我项目也不能滚动。但是官方的hello uniapp可以滚动。我再看看。谢谢你

回复 x***@outlook.com: 是不是有宽度还是overflow样式影响到

在uni-app中，scroll-view组件默认是支持垂直滚动的。如果你需要实现横向滚动，你需要设置scroll-x="true"属性，并确保内容宽度超过了容器的宽度。以下是一个简单的代码示例，展示如何在uni-app中实现scroll-view的横向滚动。

1. 页面布局（页面.vue）

<template>
  <view class="container">
    <scroll-view class="scroll-view" scroll-x="true">
      <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', 'Item 6', 'Item 7']
    };
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-view {
  width: 80%; /* 容器宽度 */
  height: 200px; /* 容器高度 */
  white-space: nowrap; /* 防止子元素换行 */
  border: 1px solid #ccc;
}

.scroll-item {
  display: inline-block;
  width: 200px; /* 子元素宽度 */
  height: 100%;
  text-align: center;
  line-height: 200px; /* 设置垂直居中 */
  border-right: 1px solid #eee; /* 分隔线 */
  box-sizing: border-box;
}

/* 最后一个子元素去除右边框 */
.scroll-item:last-child {
  border-right: none;
}
</style>

2. 注意事项

  • 确保scroll-view的宽度小于其内容（所有.scroll-item的总宽度）的总和，这是实现横向滚动的关键。
  • 使用white-space: nowrap;防止子元素换行，保证它们在同一行显示。
  • 你可以根据实际需要调整scroll-view和.scroll-item的样式，如宽度、高度、边框等。
  • 如果在真机上测试发现滚动不流畅，可以检查是否有其他样式或布局影响了滚动性能，或者尝试简化布局和内容。

上述代码提供了一个基本的横向滚动视图实现，你可以根据具体需求进行调整和扩展。

回到顶部