uni-app商品分类-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app商品分类。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<template>
	<view class="classify">
		<!-- 分类部分 -->
		<view class="cate-left">
			<view :class="['cate-item',activeIndex==index?'active':'']" v-for="(item,index) in cateList" :key="index"
				@click="changeActive(index)">{{item.classifyName}}</view>
		</view>

		<view class="cate-right">
			<view class="cate-content" v-for="(it,id) in 30" :key="id"  @click="getto(it)">
				<image src="../../static/images/userinfo.jpg" mode=""></image>
				<view class="cate-text">好东西</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				// 初始化的分类列表
				cateList: [{
					classifyName: '女装',
					id: 1
				}, {
					classifyName: '洗护',
					id: 2
				}, {
					classifyName: '内衣',
					id: 3
				}, {
					classifyName: '百货',
					id: 4
				}, {
					classifyName: '饰品',
					id: 5
				}, {
					classifyName: '母婴',
					id: 6
				}, {
					classifyName: '数码',
					id: 7
				}, {
					classifyName: '食品',
					id: 8
				}, {
					classifyName: '电器',
					id: 9
				}, {
					classifyName: '进口',
					id: 10
				}, {
					classifyName: '手机',
					id: 11
				}, {
					classifyName: '家装',
					id: 12
				}, {
					classifyName: '美妆',
					id: 13
				}],
				// 当前点击项的索引号
				activeIndex: 0,
				// 分类下的商品信息
				goodList: []
			};
		},
		methods: {
			async getcateList() {
				const res = await uni.$http.get('/classify')
				console.log(res)
				const {
					data: {
						classify,
						code
					}
				} = res
				if (code != 200) {
					return uni.showToast({
						title: '加载数据失败',
						duration: 1000,
						icon: 'none'
					})
				} else {
					this.cateList = classify
					// 获取第一个分类下的商品
					this.goodList = classify[0].children
				}
			},
			//更改点击项的索引号
			changeActive(i) {
				this.activeIndex = i
				// 已经获取到索引号
				this.goodList = this.cateList[i].children
			},
			//点击搜索框跳转到搜索页面
			getto(it) {
				console.log(it,123)
				uni.navigateTo({
					url: '/pages-zzfw/productDisplay-detail/productDisplay-detail'
				})
			},
		},
		onLoad() {
			// this.getcateList()
		}
	}
</script>

<style lang="scss" scoped>
	.classify {
		background-color: #fff;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		.cate-left {
			width: 200rpx;
			height: 100vh;
			overflow: auto;
			background-color: #F6F6F6;

			.cate-item {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.active {
				background-color: #FFFFFF;
				position: relative;
				padding-left: 40rpx;
				box-sizing: border-box;

				&::before {
					content: '';
					display: block;
					width: 5rpx;
					border-radius: 6rpx;
					height: 50rpx;
					background-color: #FC4353;
					position: absolute;
					left: 5rpx;
					top: 30rpx;
				}
			}
		}

		.cate-right {
			width: 80%;
			height: 100vh;
			overflow: auto;
			.cate-content {
				float: left;
				width: 28%;
				height: 185rpx;
				text-align: center;
				margin: 20rpx 0 0 15rpx;
				padding: 5rpx;
				background: #f1f1f1;
				border-radius: 20rpx;
				image {
					width: 100rpx;
					height: 100rpx;
				}
				.cate-text {
					font-size: 34rpx;
				}
			}
		}
	}
</style>