uniapp 简易的商品分类垂直分类（单项联动）

Ugalaxy

已于 2022-08-24 16:32:41 修改

阅读量1.7k

点赞数

分类专栏： uniapp 文章标签： uni-app

于 2022-08-20 11:08:51 首次发布

本文链接：https://blog.csdn.net/ugalaxy/article/details/126437267

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一个关于如何在电商应用中实现单向联动商品分类的示例代码。页面包含左侧的tabs分类，用户点击后会根据所选分类请求并显示对应的右侧cont内容。通过uni-app的API进行页面跳转，并根据条件判断跳转不同页面。

摘要由CSDN通过智能技术生成

商品分类页经常会用到商品的垂直分类很多是双向联动的查了查没有太适合的，就自己写一个了

我的是单项联动，左边tabs 是一个接口，右侧的conts根据点击选择的tabs请求第二个接口

这里是实例代码

<template>
	<view class="classbox">
		<!-- 左侧tabs -->
		<view class="tabs">
			<view class="tab alldisplay"  :class="item.id==current?'active' :''"   @click="select(item)" v-for="item in tabslist"  :key="item.id" >{{item.name}}</view>
		</view>
		<!-- 右侧cont -->
		<scroll-view  scroll-y="true" style="height: 100vh;">
			<view class="conts">
				<view class="cont" v-for="item in contlist"  :key="item.id"  @click="tz(item.id,item.name,item)">
					<image :src="item.imgUrl" mode=""></image>
				   <view class="name">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:'',
				tabslist:[],
				contlist:[],
			}
		},
		onLoad() {
			this.gettabslist()
			setTimeout(()=>{
				this.getcontlist(this.tabslist[0].id)
				this.current =this.tabslist[0].id
			},500)	
		},
		methods: {
			gettabslist(){
				this.$http.get('/app/goodsTypeCopy/parentList ', {}).then(res=>{
					if(res.code==200){
						console.log(res.data);
						this.tabslist = res.data
					}
				})
			},
			select(item){
				this.current  =item.id
				this.getcontlist(this.current)
				
			},
			getcontlist(id){
				this.$http.get('/app/goodsTypeCopy/moreListById',{id}).then(res=>{
					if(res.code==200){
						this.contlist = res.data
					}
				})
			},
			tz(id,name,item){
				if(this.current!==2){
					uni.navigateTo({
						url:'/pages/index/chuanglian?id=' + id +'&title=' +name
					})
				}else{
					console.log(item.isHaveSeries);
					if(item.isHaveSeries==0){
						uni.navigateTo({
							url:'/pages/index/chuanglian?id=' + id +'&title=' +name
						})
					}else{
						uni.navigateTo({
							url:'/pages/class/class2?id=' + id +'&title=' +name
						})
					}
					
				}
				
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
	}
	.tabs{
		width: 30%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f2f2f2;
	}
	.tab{
		width: 100%;
		height: 80rpx;
	}
	.conts{
		width: 100%;
		min-height: 10vh;
		padding: 26rpx;
		box-sizing: border-box;
		font-size: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.active{
		background: #fff;
	}
	.cont{
		width: 150rpx;
		height: 200rpx;
		margin: 0 20rpx 60rpx 0;
	}
	.cont image{
		width: 150rpx;
		height: 160rpx;
	} 
	.classbox{
		display: flex;
	}
	.name{
		font-size: 26rpx;
		text-align: center;
	}

</style>