uniapp商品分类选项卡

效果图如下

代码如下

<template>
	<view class="category">
		<view class="nav">
			<scroll-view class="bg" scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
				<block v-for="(item,index) in shoplist" :key="index">
					<view class="nav-item" :class="{'ac':active == index}" @click="changeNav(index)">
						{
    {
    item.title}}
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="goodsBox">
			<scroll-view scroll-y="true">
				<view class="goods">
					<view class="goods-item" v-for="(item,index) in shoplistDe" :key="index">
						<image src="../../static/logo.png" mode=""></image>
						<text>{
    {
    item.title}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
    
		data() {
    
			return {
    
				active: 0,
				scrollTop: 0,
				height: 0,
				// shoplist是后台返回的数据，一般情况是这种格式，在这里我自定义了一组数据
				shoplist: [{
    
					title: "苹果",
					child: [{
    
						title: '子苹果1',
						img: "../../static/person.png"
					}, {
    
						title: '子苹果2',
						img: "../../static/person.png"
					}]

				}, {
    
					title: "香蕉",
					child: [{
    
						title: '子香蕉1',
						img: "../../static/person.png"
					}, {
    
						title: '子香蕉2',
						img: "../../static/person.png"
					}]

				}],
				// 分类列表子集
				shoplistDe:[]

			}
		},
		created() {
    
			// 初始化分类列表子集
			this.shoplistDe=this.shoplist[0].child
		},
		onShow() {
    
			
			// 获取导航'.nav-item'的高度，在点击导航触发changeNav时，使其向下滚动
			this.$nextTick(() => {
    
				let height = uni.createSelectorQuery().select(".nav-item");
				height.boundingClientRect((data) => {
    
					this.height = data.height;
				}).exec()
			})
		},
		methods: {
    
			changeNav(index) {
    
				this.active = index;
				this.scrollTop = this.height * (index - 2);
				// 在这里请求接口 展示右侧商品数据
				this.shoplistDe=this.shoplist[index].child
			}
		}
	}
</script>
<style scoped lang="scss">
	.category {
    
		display: flex;
		position: absolute;
		width: 100%;
		height: calc(100% - var(--status-bar-height));

		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
    
			width: 0;
			height: 0;
		}

		uni-scroll-view {
    
			height: 100%;
		}

		.bg {
    
			background: #F7F8F9;
		}

		.nav {
    
			width: 200rpx;

			.nav-item {
    
				width: 200rpx;
				height: 104rpx;
				line-height: 104rpx;
				background: #F7F8F9;
				font-size: 28rpx;
				color: #505660;
				text-align: center;
				position: relative;
			}

			.ac {
    
				color: #26A69A;
				font-size: 30rpx;
				background: #fff;
			}

			.ac:before {
    
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 6rpx;
				height: 104rpx;
				background: linear-gradient(180deg, #26A69A 0%, #4DB6AC 100%);
				border-radius: 2rpx;
			}
		}

		.goodsBox {
    
			width: 550rpx;
			padding-left: 50rpx;
			background: #ffffff;

			.goods {
    
				display: flex;
				flex-wrap: wrap;
				padding: 30rpx 0;

				.goods-item {
    
					text-align: center;
					margin-bottom: 56rpx;
					margin-right: 65rpx;

					image {
    
						display: block;
						width: 100rpx;
						height: 100rpx;
						margin: 0 auto 32rpx;
						border-radius: 4rpx;
					}

					uni-text {
    
						font-size: 24rpx;
						color: #505660;
					}
				}
			}
		}
	}
</style>