外观
ScrollList 横向滚动列表
约 481 字大约 2 分钟
2025-10-31
该组件一般用于同时展示多个商品、分类的场景,也可以完成左右滑动的列表。
基本使用
通过 slot 传入内容
<template>
<un-scroll-list>
<view v-for="(item, index) in list" :key="index">
<image :src="item.thumb"></image>
</view>
</un-scroll-list>
</template>
<script setup lang="uts">
import { ref } from 'vue'
// 响应式数据
const list = ref([
{
thumb: "https://uviewui.com/goods/1.jpg",
},
{
thumb: "https://uviewui.com/goods/2.jpg",
},
{
thumb: "https://uviewui.com/goods/3.jpg",
},
{
thumb: "https://uviewui.com/goods/4.jpg",
},
{
thumb: "https://uviewui.com/goods/5.jpg",
},
])
</script>指示器的使用
indicator用于控制指示器是否显示indicatorWidth用于控制指示器整体的宽度indicatorBarWidth用于控制指示器滑块的宽度indicatorColor指示器的颜色indicatorActiveColor滑块的颜色indicatorStyle指示器的位置/样式控制
<template>
<un-scroll-list
:indicator="indicator"
indicatorColor="#fff0f0"
indicatorActiveColor="#f56c6c"
>
<view v-for="(item, index) in list" :key="index">
<image :src="item.thumb"></image>
</view>
</un-scroll-list>
</template>
<script setup lang="uts">
import { ref } from 'vue'
// 响应式数据
const indicator = ref(true)
const list = ref([
{
thumb: "https://uviewui.com/goods/1.jpg",
},
{
thumb: "https://uviewui.com/goods/2.jpg",
},
{
thumb: "https://uviewui.com/goods/3.jpg",
},
{
thumb: "https://uviewui.com/goods/4.jpg",
},
{
thumb: "https://uviewui.com/goods/5.jpg",
},
])
</script>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| scroll | 是否允许滚动 | Boolean | true |
| indicatorWidth | 指示器的整体宽度 | String | Number | 50 |
| indicatorBarWidth | 滑块的宽度 | String | Number | 20 |
| indicator | 是否显示面板指示器 | Boolean | true |
| indicatorColor | 指示器非激活颜色 | String | #f2f2f2 |
| indicatorActiveColor | 指示器滑块颜色 | String | #3c9cff |
| indicatorStyle | 指示器样式,可通过 bottom,left,right 进行定位 | String | Object | - |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| left | 滑动到左边时触发 | Function |
| right | 滑动到右边时触发 | Function |
Scss 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-scroll-list-indicator-margin-top | 15px | 指示器与内容的间距 |
| $un-scroll-list-indicator-line-width | 60px | 指示器整体宽度 |
| $un-scroll-list-indicator-height | 4px | 指示器高度 |
| $un-scroll-list-indicator-bar-width | 20px | 指示器滑块宽度 |
提示
组件内部默认使用 scss 变量,如需修改,请查看 scss 变量使用 文档
