uniapp uview ScrollList 横向滚动列表

uniapp yekong
<template>
	<view class="content">
		<u-scroll-list :indicator="indicator" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
			<view class="box" v-for="(item,index) in list" :key="index">
				<image :src="item.thumb" class="images"></image>
				<view class="titlex">
					<div class="kuai"></div>
					<div class="t">{{item.title}}</div>
				</view>
			</view>
			<div class="widht30"></div>
		</u-scroll-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					title: '全流程闭环式服务',
					thumb: 'https://piaolala.oss-cn-beijing.aliyuncs.com/static/remote/ba4ba11aa0c721fe3b8b5e297e26bc8d.png'
				}, {
					title: '成本低',
					thumb: 'https://piaolala.oss-cn-beijing.aliyuncs.com/static/remote/0c22b22ad9887cbad0e4c8c6bc957de6.png'
				}, {
					title: '放款快',
					thumb: 'https://piaolala.oss-cn-beijing.aliyuncs.com/tupian.png'
				}, {
					title: '便捷性',
					thumb: 'https://piaolala.oss-cn-beijing.aliyuncs.com/static/remote/0c22b22ad9887cbad0e4c8c6bc957de6.png'
				}, {
					title: '安全性',
					thumb: 'https://piaolala.oss-cn-beijing.aliyuncs.com/tupian.png'
				}, {
					title: '产品多',
					thumb: 'https://piaolala.oss-cn-beijing.aliyuncs.com/static/remote/0c22b22ad9887cbad0e4c8c6bc957de6.png'
				}, {
					title: '领域广',
					thumb: 'https://piaolala.oss-cn-beijing.aliyuncs.com/tupian.png'
				}, {
					title: '合规性',
					thumb: 'https://piaolala.oss-cn-beijing.aliyuncs.com/static/remote/0c22b22ad9887cbad0e4c8c6bc957de6.png'
				}, {
					title: '增值服务',
					thumb: 'https://piaolala.oss-cn-beijing.aliyuncs.com/tupian.png'
				}, ]
			}
		},
		methods: {
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 0upx 0 30rpx;

		.scroll {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
		}

		.box {
			display: inline-block;
			width: 308upx;
			margin-right: 18upx;
		}

		.box:last-child {
			margin-right: 0;
		}

		.images {
			width: 308upx;
			height: 219upx;
			border-radius: 16upx;
		}

		.titlex {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;

			.kuai {
				width: 6rpx;
				height: 17rpx;
				background: linear-gradient(0deg, #005DE9, #1C6EEC);
				box-shadow: 0px 5rpx 10rpx 0px rgba(37, 116, 236, 0.5);
				margin-right: 10rpx;
			}

			.t {
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #000000;
			}
		}

		.detail {
			font-size: 20rpx;
			font-family: PingFang;
			font-weight: bold;
			text-decoration: underline;
			color: #0B64EA;
		}
	}

	.widht30 {
		width: 30rpx;
	}
</style>

指示器的使用

indicator 用于控制指示器是否显示
indicatorWidth 用于控制指示器整体的宽度
indicatorBarWidth 用于控制指示器滑块的宽度
indicatorColor 指示器的颜色
indicatorActiveColor 滑块的颜色
indicatorStyle 指示器的位置/样式控制

兼容性与性能

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

<template>
    <u-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.thumb"></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>
                <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
            </view>
        </view>
    </u-scroll-list>
</template>
<script>
export default {
	data() {
		return {
			list: [{
				price: '230.5',
                thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
			}, {
				price: '74.1',
                thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
			}, {
				price: '8457',
                thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
			}, {
				price: '1442',
                thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
			}, {
				price: '541',
                thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
			}, {
				price: '234',
                thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
			}, {
				price: '562',
                thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
			}, {
				price: '251.5',
                thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
			}]
		}
	},
	methods: {
		left() {
			console.log('left');
		},
		right() {
			console.log('right');
		}
	}
}
</script>

<style lang="scss">
.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>

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 - -

Events

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

喜欢