uv-ui

# ScrollList 横向滚动列表

✈

组件名：uv-scroll-list

点击下载&安装 (opens new window)

该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表，往往数量不确定，数量较多支持左右滚动。灵活配置，开箱即用。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

  1. 本组件如果在其他组件（eg：uv-vtabs、uv-popup等组件）中使用，可以给外层套一个view标签进行控制宽度，这样就能保证组件内部计算无误，否则可能会出现被截取的现象。

# 基本使用

<template>
	<uv-scroll-list>
		<view v-for="(item, index) in list" :key="index">
			<image :src="item.image" mode="heightFix" style="height: 200px;"></image>
		</view>
	</uv-scroll-list>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					image: "https://via.placeholder.com/200x200.png/3c9cff/fff"
				}, {
					image: "https://via.placeholder.com/200x200.png/f9ae3d/fff"
				}, {
					image: "https://via.placeholder.com/200x200.png/5ac725/fff"
				}, {
					image: "https://via.placeholder.com/200x200.png/f56c6c/fff"
				}, {
					image: "https://via.placeholder.com/200x200.png/909399/fff"
				}]
			}
		}
	}
</script>

# 指示器的使用

  • indicator 用于控制指示器是否显示
  • indicatorWidth 用于控制指示器整体的宽度
  • indicatorBarWidth 用于控制指示器滑块的宽度
  • indicatorColor 指示器的颜色
  • indicatorActiveColor 滑块的颜色
  • indicatorStyle 指示器的位置/样式控制
<template>
	<uv-scroll-list :indicator="true" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
		<view v-for="(item, index) in list" :key="index">
			<image :src="item.image" mode="heightFix" style="height: 200px;"></image>
		</view>
	</uv-scroll-list>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					image: "https://via.placeholder.com/200x200.png/3c9cff/fff"
				}, {
					image: "https://via.placeholder.com/200x200.png/f9ae3d/fff"
				}, {
					image: "https://via.placeholder.com/200x200.png/5ac725/fff"
				}, {
					image: "https://via.placeholder.com/200x200.png/f56c6c/fff"
				}, {
					image: "https://via.placeholder.com/200x200.png/909399/fff"
				}]
			}
		}
	}
</script>

# 兼容性与性能

  • 此组件是在nvue中引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损，在nvue中会有更好的体验。
  • 此组件是在APP-VUE、H5、小程序中使用的是wxs。
  • 其他平台则使用js完成。

当滑动到最左边/最右边时，uv-ui提供了事件left和right可供调用，用于对列表滑动到端点处的业务实现。

<template>
	<uv-scroll-list @right="right" @left="left">
		<view class="scroll-list" style="flex-direction: row;">
			<view 
				class="scroll-list__goods-item" 
				v-for="(item, index) in list" 
				:key="index" 
				:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
			>
				<image class="scroll-list__goods-item__image" :src="item.image"></image>
				<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
			</view>
			<view class="scroll-list__show-more">
				<text class="scroll-list__show-more__text">查看更多</text>
			</view>
		</view>
	</uv-scroll-list>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					price: '230.5',
					image: 'https://via.placeholder.com/60x60.png/3c9cff/fff'
				}, {
					price: '74.1',
					image: 'https://via.placeholder.com/60x60.png/f9ae3d/fff'
				}, {
					price: '8457',
					image: 'https://via.placeholder.com/60x60.png/5ac725/fff'
				}, {
					price: '1442',
					image: 'https://via.placeholder.com/60x60.png/f56c6c/fff'
				}, {
					price: '541',
					image: 'https://via.placeholder.com/60x60.png/909399/fff'
				}, {
					price: '234',
					image: 'https://via.placeholder.com/60x60.png/3c9cff/fff'
				}, {
					price: '562',
					image: 'https://via.placeholder.com/60x60.png/f9ae3d/fff'
				}, {
					price: '251.5',
					image: 'https://via.placeholder.com/60x60.png/5ac725/fff'
				}]
			}
		},
		methods: {
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			}
		}
	}
</script>
<style lang="scss">
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.scroll-list {
		@include flex(column);
		&__goods-item {
			margin-right: 20px;
			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}
			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}
		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;
			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}
</style>

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# ScrollList Props

参数 说明 类型 默认值 可选值
indicatorWidth 指示器的整体宽度 String | Number 50 -
indicatorBarWidth 滑块的宽度 String | Number 20 -
indicator 是否显示面板指示器 Boolean true false
indicatorColor 指示器非激活颜色 String #f2f2f2 -
indicatorActiveColor 指示器滑块颜色 String #3c9cff -
indicatorStyle 指示器样式，可通过bottom，left，right进行定位 String | Object - -

# ScrollList Events

事件名 说明 回调参数
@left 滑动到左边时触发 -
@right 滑动到右边时触发 -

← Swiper 轮播图 →