uniapp 横向滚动如何实现

在uniapp中如何实现横向滚动效果？我在开发时遇到了横向滚动的需求，但不知道具体该怎样实现。希望有经验的朋友能分享一下实现的代码示例或思路，比如是否需要使用scroll-view组件，以及如何设置CSS样式才能让内容横向排列并滚动。谢谢！

2 回复

使用scroll-view组件，设置scroll-x属性为true，并给外层容器设置white-space: nowrap。内部元素用display: inline-block横向排列即可。


在 UniApp 中实现横向滚动，可以使用 scroll-view 组件并设置 scroll-x 属性。以下是具体实现方法：

  1. 基本结构：

    <template>
  <scroll-view scroll-x class="scroll-container">
    <view class="item">内容1</view>
    <view class="item">内容2</view>
    <view class="item">内容3</view>
    <!-- 更多内容 -->
  </scroll-view>
</template>

  2. 关键样式：

    .scroll-container {
  white-space: nowrap; /* 防止换行 */
}
.item {
  display: inline-block; /* 横向排列 */
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
}

  3. 注意事项：

    • 确保 scroll-view 的父容器宽度足够，否则可能无法滚动。
    • 内容元素必须设置为 inline-block 或 flex 布局实现横向排列。

完整示例：

<template>
  <view>
    <scroll-view scroll-x class="scroll-content">
      <view v-for="item in 10" :key="item" class="scroll-item">
        项目{{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<style scoped>
.scroll-content {
  width: 100%;
  white-space: nowrap;
}
.scroll-item {
  display: inline-block;
  width: 200rpx;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  background: #eee;
  margin-right: 20rpx;
}
</style>

这样即可实现横向滚动效果。

回到顶部