ScrollList 横向滚动列表

				
<template>
	<zk-theme type="page" padding="20" showBack navbarTitle=" 横向滚动 ">

		<zk-theme type="card" padding="20">
			<view class="section-header">
				<zk-text class="title" text="热门分类"></zk-text>
			</view>
			<zk-scroll-list :dataSource="navList" :column="5" :row="1" :barShow="true" :barWidth="120" :imageWidth="88"
				:imageHeight="88" :imageRadius="50" :titleSize="24" :showSubtitle="true" :subtitleSize="20"
				:subtitleColor="'#666'" :gridGap="30" @click="onNavClick" />
		</zk-theme>


		<zk-theme type="card" padding="20">
			<view class="section-header">
				<zk-text class="title" text="品牌精选"></zk-text>

			</view>
			<zk-scroll-list :dataSource="brandList" :column="3" :row="1" :barShow="true" :barWidth="120"
				:imageWidth="300" :imageHeight="160" :imageRadius="16" :titleSize="28" :titleWeight="600"
				:showSubtitle="true" :subtitleSize="24" :gridGap="60" @click="onBrandClick" />
		</zk-theme>


		<zk-theme type="card" padding="20">
			<view class="section-header">
				<zk-text class="title" text="热门服务"></zk-text>
			</view>
			<zk-scroll-list :dataSource="serviceList" :column="5" :row="2" :barShow="true" :imageWidth="60"
				:imageHeight="60" :imageRadius="12" :titleSize="24" :showSubtitle="false" :gridGap="30"
				@click="onServiceClick" />
		</zk-theme>


		<zk-theme type="card" padding="20">
			<view class="section-header">

				<zk-text class="title" text="好物推荐"></zk-text>
			</view>
			<zk-scroll-list :dataSource="goodsList" :column="3" :row="1" :barShow="true" :barWidth="120"
				:imageWidth="240" :imageHeight="240" :imageRadius="16" :titleSize="28" :titleWeight="500"
				:titleLines="2" :showSubtitle="true" :subtitleColor="'#ff4757'" :gridGap="60" @click="onGoodsClick" />
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
						image: '/static/user/1.jpg',
						title: '女装精选',
						subtitle: '春季上新'
					},
					{
						image: '/static/user/2.jpg',
						title: '时尚搭配',
						subtitle: '流行趋势'
					},
					{
						image: '/static/user/3.jpg',
						title: '运动系列',
						subtitle: '潮流运动'
					},
					{
						image: '/static/user/4.jpg',
						title: '包包配饰',
						subtitle: '品质精选'
					},
					{
						image: '/static/user/1.jpg',
						title: '美妆护肤',
						subtitle: '美丽焕新'
					}
				],
				brandList: [{
						image: '/static/user/1.jpg',
						title: 'NIKE 春季特惠',
						subtitle: '运动精选大促'
					},
					{
						image: '/static/user/2.jpg',
						title: 'ZARA 新品首发',
						subtitle: '春夏系列上新'
					},
					{
						image: '/static/user/3.jpg',
						title: 'UNIQLO 联名系列',
						subtitle: '设计师合作款'
					}
				],
				serviceList: [{
						image: '/static/user/1.jpg',
						title: '签到领券'
					},
					{
						image: '/static/user/2.jpg',
						title: '限时秒杀'
					},
					{
						image: '/static/user/3.jpg',
						title: '拼团优惠'
					},
					{
						image: '/static/user/4.jpg',
						title: '积分商城'
					},
					{
						image: '/static/user/1.jpg',
						title: '领券中心'
					},
					{
						image: '/static/user/2.jpg',
						title: '会员专享'
					},
					{
						image: '/static/user/3.jpg',
						title: '品牌折扣'
					},
					{
						image: '/static/user/4.jpg',
						title: '更多服务'
					}
				],
				goodsList: [{
						image: '/static/user/1.jpg',
						title: '春季新款小众设计感连衣裙',
						subtitle: '¥299'
					},
					{
						image: '/static/user/2.jpg',
						title: '时尚百搭牛仔外套',
						subtitle: '¥199'
					},
					{
						image: '/static/user/3.jpg',
						title: '韩版休闲运动套装',
						subtitle: '¥259'
					},
					{
						image: '/static/user/4.jpg',
						title: '简约气质通勤包包',
						subtitle: '¥159'
					}
				]
			}
		},
		methods: {
			onNavClick({
				item,
				index
			}) {
				uni.showToast({
					title: `点击了${item.title}`,
					icon: 'none'
				})
			},
			onBrandClick({
				item,
				index
			}) {
				uni.showToast({
					title: `进入${item.title}`,
					icon: 'none'
				})
			},
			onServiceClick({
				item,
				index
			}) {
				uni.showToast({
					title: `使用${item.title}`,
					icon: 'none'
				})
			},
			onGoodsClick({
				item,
				index
			}) {
				uni.showToast({
					title: `查看商品：${item.title}`,
					icon: 'none'
				})
			},
			onMoreClick() {
				uni.showToast({
					title: '查看更多',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
		padding: 0 12rpx;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #1a1a1a;
			position: relative;
			padding-left: 24rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 28rpx;
				background: linear-gradient(180deg, #3B82F6 0%, #60A5FA 100%);
				border-radius: 3rpx;
			}
		}

		.more {
			font-size: 26rpx;
			color: #666666;
			padding: 8rpx 24rpx;
			background: #f8f9fa;
			border-radius: 24rpx;
			transition: all 0.3s ease;

			&:active {
				background: #f1f3f5;
				color: #3B82F6;
			}
		}
	}
</style>