该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。

基本使用

通过 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 变量使用 文档