uniapp横向滚动如何实现

在uniapp中如何实现横向滚动效果？我尝试使用scroll-view设置scroll-x属性，但内容无法横向滑动。是否需要额外样式配置？求具体实现方法和注意事项。

2 回复

使用scroll-view组件，设置scroll-x属性为true，并添加white-space: nowrap样式。

示例代码：

<scroll-view scroll-x class="scroll-container">
  <view class="item">内容1</view>
  <view class="item">内容2</view>
</scroll-view>

<style>
.scroll-container {
  white-space: nowrap;
}
.item {
  display: inline-block;
  width: 100px;
}
</style>

在 UniApp 中实现横向滚动，可以通过以下步骤完成：

  1. 使用 scroll-view 组件：设置 scroll-x 属性为 true，并确保容器宽度固定或通过样式限制。
  2. 添加样式：为 scroll-view 和内部元素设置 white-space: nowrap 和 display: inline-block，使内容横向排列。

示例代码：

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

<style scoped>
.scroll-container {
  white-space: nowrap; /* 禁止换行 */
  width: 100%; /* 容器宽度 */
}
.item {
  display: inline-block; /* 横向排列 */
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #f0f0f0;
  margin-right: 10px;
}
</style>

关键点：

  • scroll-x="true"：启用横向滚动。
  • white-space: nowrap：防止内容换行。
  • display: inline-block：使子元素横向排列。

如果内容动态生成，结合 v-for 循环即可。此方法适用于列表、图片等横向滚动场景。

回到顶部