T-UVUE-UI1.0.0

Appearance

ScrollList 滑动列表 ​

滑动列表组件允许用户通过滑动来浏览列表项，支持自定义指示器以提供更好的用户体验。

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

示例 ​

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

		</t-card>
		<introduction title="基础功能">
			<t-scroll-list>
				<template v-for="(item,index) in list1" :key="index">
					<t-image :src="`static/image/goods/${item.thumb}`" class="twh.150-mr.20"></t-image>
				</template>
			</t-scroll-list>
		</introduction>
		<introduction title="设置指示器">
			<t-scroll-list indicatorClass="w.200-h.15-bg.rgba(245,108,108,0.2)"
				indicator-bar-class="bg.#f56c6c-h.15-w.80">
				<template v-for="(item,index) in list1" :key="index">
					<t-image :src="`static/image/goods/${item.thumb}`" class="twh.150-mr.20"></t-image>
				</template>
			</t-scroll-list>
		</introduction>
		<introduction title="不显示指示器">
			<t-scroll-list :indicator="false">
				<template v-for="(item,index) in list1" :key="index">
					<t-image :src="`static/image/goods/${item.thumb}`" class="twh.150-mr.20"></t-image>
				</template>
			</t-scroll-list>
		</introduction>
		<introduction title="宫格">
			<t-scroll-list>
				<t-grid :column="4" class="w.690">
					<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.690">
					<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>
	</t-page>
</template>

<script>
	type testScrollList = {
		price : string,
		thumb : string
	}
	export default {
		data() {
			return {
				list: [{
					price: '手机',
					thumb: '4.png'
				}, {
					price: '数码',
					thumb: '6.png'
				}, {
					price: '食品',
					thumb: '3.png'
				}, {
					price: '电器',
					thumb: '2.png'
				}, {
					price: '百货',
					thumb: '7.png'
				}, {
					price: '男装',
					thumb: '1.png'
				}, {
					price: '家具',
					thumb: '8.png'
				}, {
					price: '鞋包',
					thumb: '5.png'
				}] as testScrollList[],
				list1: [{
					price: '￥230.5',
					thumb: '1.jpg'
				}, {
					price: '￥74.1',
					thumb: '2.jpg'
				}, {
					price: '￥8457',
					thumb: '3.jpg'
				}, {
					price: '￥1442',
					thumb: '4.jpg'
				}, {
					price: '￥234',
					thumb: '5.jpg'
				}, {
					price: '￥562',
					thumb: '6.jpg'
				}, {
					price: '￥251.5',
					thumb: '7.jpg'
				}] as testScrollList[]
			};
		},
		created() {
			// viteApi('testScrillListGrid').then((res : UTSJSONObject) => {
			// 	const rst : UTSJSONObject[] = res.get('data') as UTSJSONObject[]

			// 	this.list1 = JSON.parse<Array<testScrollList>>(JSON.stringify(rst)) as testScrollList[]
			// 	console.log(this.list1)
			// }).catch(err => {
			// 	console.log(err)
			// })
			// viteApi('testScrillList').then((res : UTSJSONObject) => {
			// 	const rst : UTSJSONObject[] = res.get('data') as UTSJSONObject[]
			// 	this.list = JSON.parse<Array<testScrollList>>(JSON.stringify(rst)) as testScrollList[]
			// }).catch(err => {
			// 	console.log(err)
			// })
		}
	}
</script>

Props ​

名称描述类型默认值
type列表类型String'p'
indicator是否显示指示器Booleantrue
indicatorClass指示器的类名String''
indicatorBarClass指示器条形的类名String''

Events ​

名称描述参数
scroll当滚动时触发-

Methods ​

名称描述
scroll处理滚动事件