Tui Plus Vapor

Appearance

# t-scroll-list

ScrollList 滚动列表

t-scroll-list 组件介绍 ​

t-scroll-list 是滑动列表组件，允许用户通过横向滑动来浏览列表项，支持自定义指示器显示当前位置。

t-scroll-list 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-scroll-list 基础用法 ​

基础用法参考 demo/scroll-list/scroll-list.uvue，将列表项放在默认插槽中。

vue
<template>
	<view>
		<t-card class="mlrt-15"
				title="ScrollList 滑动列表"
				sub-title="滑动组件提供水平滚动功能，支持自定义指示器样式,兼容PC环境鼠标滑动">

		</t-card>
		<introduction title="宫格">
			<t-scroll-list>
				<t-grid :column="4"
						class="w-345">
					<t-grid-item v-for="i in 8"
								 :key="i"
								 :icon="`/static/grid/grid (${i}).png`"
								 :label="`功能${i}`"></t-grid-item>
				</t-grid>
				<t-grid :column="4"
						class="w-345">
					<t-grid-item v-for="i in 8"
								 :key="i"
								 :icon="`/static/grid/grid (${i}).png`"
								 :label="`功能${i+8}`"></t-grid-item>
				</t-grid>
			</t-scroll-list>
		</introduction>
	</view>
</template>
<script setup>
	import { getRandomInt } from '@/uni_modules/tui-common'
	const list = ref<UTSJSONObject[]>([{
		name: '手机',
		thumb: '4.png',
		price: getRandomInt(100, 200)
	}, {
		name: '数码',
		thumb: '6.png',
		price: getRandomInt(100, 200)
	}, {
		name: '食品',
		thumb: '3.png',
		price: getRandomInt(100, 200)
	}, {
		name: '电器',
		thumb: '2.png',
		price: getRandomInt(100, 200)
	}, {
		name: '百货',
		thumb: '7.png',
		price: getRandomInt(100, 200)
	}, {
		name: '男装',
		thumb: '1.png',
		price: getRandomInt(100, 200)
	}, {
		name: '家具',
		thumb: '8.png',
		price: getRandomInt(100, 200)
	}, {
		name: '鞋包',
		thumb: '5.png',
		price: getRandomInt(100, 200)
	}])
</script>

t-scroll-list Props ​

属性名说明类型默认值
indicator是否显示指示器booleantrue
path点击组件后跳转的页面路径string''
hover是否启用点击效果booleanfalse
type组件主题类型string'primary'
disabled是否禁用booleanfalse
effect组件显示主题string'normal'
size组件尺寸string'medium'

t-scroll-list Slots ​

插槽名说明
default默认插槽，放置滑动列表项