uniapp 侧边选项卡（左右滚动）

已于 2023-04-11 17:10:49 修改
阅读量5k 收藏 47
点赞数 9
分类专栏： vue uniapp 文章标签： 前端
于 2022-07-09 23:50:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/125700696
版权
vue 同时被 2 个专栏收录
26 篇文章 3 订阅
订阅专栏
uniapp
26 篇文章 4 订阅
订阅专栏

一、数据来自mock模拟数据（布局仿小米商城）

二、效果

三、代码

<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<view 
			@click="leftClickHandle(index,item.id)"
			:class="active===index?'active':''"
			v-for="(item,index) in leftMenuList" 
			:key="item.id">
			  {{item}}
			</view>
		</scroll-view>
		<scroll-view  v-if="refurbish" class="right" scroll-y 
        :scroll-top="scrollTop" 
        @scrolltolower="scrollLower" 
		scroll-with-animation>
			<view class="item" v-for="(item,index) in rightContent" :key="index">
				<text>{{item.cat_name}}</text>
				<view class="item-phone" v-for="(v,i) in item.children" :key="i" 
@tap="handleDetalis(`/pages/goodsList/goodsList?cid=${v.cat_id}`)">
					<view>
						<image :src="v.cat_icon"></image>
					</view>
					<view class="phone-r">
						<view>{{v.cat_name}}</view>
						<view>￥{{v.cat_money}}起</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//左侧菜单
				leftMenuList: [],
				//选择的状态
				active: 0,
				// 右侧数据
				rightContent: [],
				//接口返回数据
				cates:[],
				scrollTop:0,
                refurbish:true, //刷新数据
			}
		},
		onLoad () {
			// 1、获取本地存储中的数据
			const Cates = uni.getStorageSync('cates')
			if(!Cates) {
				this.getPicsCate()
			}else{
				//有旧的数据 定义过期时间
				if(Date.now() - Cates.time > 1000*10) {
					//重新请求
					this.getPicsCate()
				}else{
					//可以使用旧数据
					this.cates = Cates.data
					let leftMenuList = this.cates.map(v=>v.cat_name)
					this.leftMenuList = leftMenuList
					let rightContent = this.cates[0].children
					this.rightContent = rightContent
				}
			}
		},
		methods: {
            //获取数据
			getPicsCate () {
				uni.request({
					  url: '/data/list/tian',  
					  dataType: 'json',
					  method: 'GET',
					  success: (res)=>{
						 this.cates = res.data.message
						  //把接口数据存储到本地存储中
						 uni.setStorageSync('cates',{time:Date.now(),data:this.cates})
						 let leftMenuList = this.cates.map(v=>v.cat_name)
						 this.leftMenuList = leftMenuList
						 let rightContent = this.cates[0].children
						 this.rightContent = rightContent
					  }
				})
			},
            //左侧菜单点击事件
			leftClickHandle (index) {
				this.active = index
				let rightContent = this.cates[index].children
				this.rightContent = rightContent
				this.scrollTop = 0
                this.refurbish = false
				setTimeout(()=>{
					this.refurbish = true
				},1)
			},
            //跳转对应的id
            handleDetalis(url){
                  uni.navigateTo({
					url
				})  
            },
		}
	}
</script>

<style lang="scss">
scroll-view ::-webkit-scrollbar {  
	display: none !important;  
	width: 0 !important;  
	height: 0 !important;  
	-webkit-appearance: none;  
	background: transparent;  
}
page{
	overflow-y: hidden;
	height: 100%;
}
.pics{
	height: 100%;
	display: flex;
	.left{
		view:first-child{
			margin-top: 0rpx !important;
		}
		width: 200rpx;
		height: 100%;
		view{
			margin-top: 10rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #333;
			text-align: center;
			font-size: 24rpx;
		}
		.active{
			background:#F8F8F8;
			color: #000;
			font-weight: bold;
		}
	}
	.right{
		height: 100%;
		width: 520rpx;
		margin: 10rpx auto;
		.item{
			margin-top: 20rpx;
			> text {
				font-size: 20rpx;
				font-weight: bold;
			}
			.item-phone{
				margin-top: 20rpx;
				background-color: #F8F8F8;
				border-radius: 8rpx;
				padding: 10rpx;
				display: flex;
				align-items: center;
				view:first-child{
					image{
						width: 120rpx;
						height: 100rpx;
					}
				}
				.phone-r{
					margin-left: 15rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					view{
						font-size: 20rpx;
					}
					view:last-child{
						margin-top: 10rpx;
					}
				}
			}
		}
		.item:last-child{
			padding-bottom: 30rpx;
		}
	}
}
</style>

四、模拟数据

{
	"status": 0,
	"message": [
		{
			"cat_id": 1,
			"cat_name": "Xiaomi手机",
			"cat_pid": 0,
			"children": [
				{
					"cat_id": 3,
					"cat_name": "Xiaomi Civi",
					 "children": [
						{
							"cat_id": 5,
							"cat_name": "Xiaomi Civi 1S",
							"cat_money": 2299,
							"cat_icon": "https://shopstatic.vivo.com.cn/vivoshop/commodity/36/10007336_1650358109769_750x750.png.webp"
						 },
						 {
							"cat_id": 6,
							"cat_name": "Xiaomi Civi",
							"cat_money": 2099,
							"cat_icon": "https://shopstatic.vivo.com.cn/vivoshop/commodity/36/10007336_1650358095399_750x750.png.webp"
						 }
					 ]
				},
				{
					"cat_id": 7,
					"cat_name": "Xiaomi 数字系列",
					"children": [
						{
							"cat_id": 23,
							"cat_name": "Xiaomi 12S Ultra",
							"cat_money": 5999,
							"cat_icon": "https://shopstatic.vivo.com.cn/vivoshop/commodity/11/10007411_1652682629904_750x750.png.webp"
						 },
						 {
							"cat_id": 24,
							"cat_name": "Xiaomi 11",
							"cat_money": 4699,
							"cat_icon": "https://shopstatic.vivo.com.cn/vivoshop/commodity/75/10007475_1653651557950_750x750.png.webp"
						 },
						 {
							"cat_id": 25,
							"cat_name": "xiaomi 10 青春版 5G",
							"cat_money": 2299,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e813ca2ccc6708077b17dacbdf1d1465.jpg"
						 },
						 {
							"cat_id": 26,
							"cat_name": "xiaomi 11 青春活力版",
							"cat_money": 2299,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png"
						 }
					]
				},
				{
					"cat_id": 30,
					"cat_name": "Xiao MIX系列",
					"children": [
						{
							"cat_id": 42,
							"cat_name": "Xiaomi MIX 4",
							"cat_money": 4199,
							"cat_icon": "https://shopstatic.vivo.com.cn/vivoshop/commodity/36/10007336_1650358109769_750x750.png.webp"
						 },
						 {
							"cat_id": 43,
							"cat_name": "Xiaomi MIX Alpha",
							"cat_money": 19999,
							"cat_icon": "https://shopstatic.vivo.com.cn/vivoshop/commodity/09/10007209_1647845438443_750x750.png.webp"
						 }
					]
				}
			]
		},
		{
			"cat_id": 55,
			"cat_name": "Redmi手机",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 69,
					"cat_name": "Note系列",
					"cat_money": 55,
					"children": [
						{
							"cat_id": 72,
							"cat_name": "Redmi Note 11T Pro+",
							"cat_money": 2099,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012022_19bbddb6b35c3828f8b53f450c1519a3.png"
						},
						 {
							"cat_id": 73,
							"cat_name": "Redmi Note 11T Pro",
							"cat_money": 1799,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cbadf8917627a3a80cc61f3d95f48cfb.png"
						}
					]
				},
				{
					"cat_id": 1007,
					"cat_name": "K 系列",
					"cat_money": 55,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 42,
							"cat_name": "Redmi K50 Pro",
							"cat_money": 2999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png"
						 },
						 {
							"cat_id": 43,
							"cat_name": "Redmi K50 ",
							"cat_money": 2399,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012022_19bbddb6b35c3828f8b53f450c1519a3.png"
						 },
						 {
							"cat_id": 44,
							"cat_name": "Redmi K40s ",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012022_19bbddb6b35c3828f8b53f450c1519a3.png"
						 },
						 {
							"cat_id": 45,
							"cat_name": "Redmi K40 ",
							"cat_money": 1599,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012022_19bbddb6b35c3828f8b53f450c1519a3.png"
						 }
					]
				},
				{
					"cat_id": 1008,
					"cat_name": "数字系列",
					"cat_money": 56,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 44,
							"cat_name": "Redmi K50 Pro",
							"cat_money": 2999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png"
						 },
						 {
							"cat_id": 45,
							"cat_name": "Redmi K50 ",
							"cat_money": 2399,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012022_19bbddb6b35c3828f8b53f450c1519a3.png"
						 }
					]
				}
			]
		},
		{
			"cat_id": 71,
			"cat_name": "游戏手机",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 89,
					"cat_name": "游戏手机",
					"cat_money": 71,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "黑鲨5 Pro",
							"cat_money": 3799,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png"
						},
						 {
							"cat_id": 96,
							"cat_name": "k50 电竞版",
							"cat_money": 2399,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1569297737.97669352.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "黑鲨5 RS",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cbadf8917627a3a80cc61f3d95f48cfb.png"
						},
						{
							"cat_id": 98,
							"cat_name": "黑鲨5 ",
							"cat_money": 2199,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3d41aa1a9cc51c3c943d5ed9fd70101.png"
						},
						{
							"cat_id": 99,
							"cat_name": "黑鲨4",
							"cat_money": 2099,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205221513_4a54fc6db0b3bb27b77c5bab1d11b26d.png"
						}, 
						{
							"cat_id": 100,
							"cat_name": "黑鲨4S",
							"cat_money": 2199,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png"
						},
						{
							"cat_id": 101,
							"cat_name": "Redmi k40 游戏增强版",
							"cat_money": 2799,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4e75e528fb468aee107f551179aa0799.jpg"
						},
						{
							"cat_id": 102,
							"cat_name": "黑鲨4 Pro",
							"cat_money": 2699,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205221513_4a54fc6db0b3bb27b77c5bab1d11b26d.png"
						}, 
						{
							"cat_id": 103,
							"cat_name": "黑鲨4S",
							"cat_money": 2199,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png"
						}
					]
				}
			]
		},
		{
			"cat_id": 72,
			"cat_name": "电脑平板",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 94,
					"cat_name": "小米平板",
					"cat_money": 72,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "小米平板5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 96,
							"cat_name": "小米平板5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "小米平板5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 98,
							"cat_name": "小米灵感触控笔",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "笔记本",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "Xiaomi Book Pro 14 2022",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "Xiaomi Book Pro 16 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "RedmiBook Pro 15 锐龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "Redmi Book Pro 15 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "小米笔记本 Pro 15 增强版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 73,
			"cat_name": "智能穿戴",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 95,
					"cat_name": "近期上新",
					"cat_money": 73,
					"children": [
						{
							"cat_id": 96,
							"cat_name": "小米平板5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 97,
							"cat_name": "小米平板5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 98,
							"cat_name": "小米平板5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 99,
							"cat_name": "小米灵感触控笔",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "笔记本",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "Xiaomi Book Pro 14 2022",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "Xiaomi Book Pro 16 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "RedmiBook Pro 15 锐龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "Redmi Book Pro 15 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "小米笔记本 Pro 15 增强版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 77,
			"cat_name": "电视",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 100,
					"cat_name": "电视",
					"cat_money": 77,
					"children": [
						{
							"cat_id": 101,
							"cat_name": "小米平板5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 102,
							"cat_name": "小米平板5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 103,
							"cat_name": "小米平板5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 104,
							"cat_name": "小米灵感触控笔",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "笔记本",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "Xiaomi Book Pro 14 2022",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "Xiaomi Book Pro 16 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "RedmiBook Pro 15 锐龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "Redmi Book Pro 15 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "小米笔记本 Pro 15 增强版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 81,
			"cat_name": "大家电",
			"children": [
				{
					"cat_id": 94,
					"cat_name": "大家电",
					"cat_money": 72,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "大家电5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 96,
							"cat_name": "大家电5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "大家电5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 98,
							"cat_name": "大家电",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "大家电",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "Xiaomi Book Pro 14 2022",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "Xiaomi Book Pro 16 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "RedmiBook Pro 15 锐龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "Redmi Book Pro 15 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "小米笔记本 Pro 15 增强版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 76,
			"cat_name": "小家电",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 94,
					"cat_name": "厨房小电",
					"cat_money": 72,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "小家电5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 96,
							"cat_name": "小家电5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "小家电5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 98,
							"cat_name": "小家电",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "小家电",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "Xiaomi小家电",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "B小家电",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "R小家电",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "R小家电",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "小家电 增强版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 77,
			"cat_name": "智能家居",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 94,
					"cat_name": "智能家居",
					"cat_money": 72,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "智能家居5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 96,
							"cat_name": "智能家居5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "智能家居5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 98,
							"cat_name": "智能家居",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "智能家居",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "智能家居 Book2",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "智能家居022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "智能家居 P龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "智能家居",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "智能家居",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 78,
			"cat_name": "出行运动",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 94,
					"cat_name": "出行运动",
					"cat_money": 72,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "出行运动5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 96,
							"cat_name": "出行运动5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "出行运动5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 98,
							"cat_name": "出行运动",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "出行运动",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "出行运动Pro 14 2022",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "出行运动2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "出行运动锐龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "Re出行运动2",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "小出行运动版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 79,
			"cat_name": "日用百货",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 94,
					"cat_name": "日用百货",
					"cat_money": 72,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "小米平板5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 96,
							"cat_name": "小米平板5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "小米平板5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 98,
							"cat_name": "小米灵感触控笔",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "笔记本",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "Xiaomi Book Pro 14 2022",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "Xiaomi Book Pro 16 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "RedmiBook Pro 15 锐龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "Redmi Book Pro 15 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "小米笔记本 Pro 15 增强版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 80,
			"cat_name": "儿童用品",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 94,
					"cat_name": "儿童用品",
					"cat_money": 72,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "儿童用品5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 96,
							"cat_name": "儿童用品5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "小儿童用品",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 98,
							"cat_name": "小儿童用品笔",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "儿童用品",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "Xi儿童用品022",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "Xia儿童用品022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "R儿童用品龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "儿童用品2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "儿童用品5 增强版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 81,
			"cat_name": "有品精选",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 94,
					"cat_name": "有品精选",
					"cat_money": 72,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "小米平板5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 96,
							"cat_name": "小米平板5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "小米平板5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 98,
							"cat_name": "小米灵感触控笔",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "笔记本",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "Xiaomi Book Pro 14 2022",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "Xiaomi Book Pro 16 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "RedmiBook Pro 15 锐龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "Redmi Book Pro 15 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "小米笔记本 Pro 15 增强版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 82,
			"cat_name": "小米服务",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 94,
					"cat_name": "小米服务",
					"cat_money": 72,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "小米平板5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 96,
							"cat_name": "小米平板5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "小米平板5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 98,
							"cat_name": "小米灵感触控笔",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "笔记本",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "Xiaomi Book Pro 14 2022",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "Xiaomi Book Pro 16 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "RedmiBook Pro 15 锐龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "Redmi Book Pro 15 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "小米笔记本 Pro 15 增强版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		},
		{
			"cat_id": 83,
			"cat_name": "促销特惠",
			"cat_money": 0,
			"children": [
				{
					"cat_id": 94,
					"cat_name": "促销特惠",
					"cat_money": 72,
					"children": [
						{
							"cat_id": 95,
							"cat_name": "小米平板5",
							"cat_money": 1999,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg"
						},
						 {
							"cat_id": 96,
							"cat_name": "小米平板5 Pro 5G",
							"cat_money": 3499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg"
						},
						{
							"cat_id": 97,
							"cat_name": "小米平板5 Pro",
							"cat_money": 2499,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598862.59259381.png"
						},
						{
							"cat_id": 98,
							"cat_name": "小米灵感触控笔",
							"cat_money": 349,
							"cat_icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628598434.12973830.png"
						}
					]
				},
				{
					"cat_id": 91,
					"cat_name": "笔记本",
					"cat_money": 72,
					"cat_icon": "https://api-hmugo-web.itheima.net/full/dec71b02fc79cd5c3cf2f596f5fc40f2ae90ba15.jpg",
					"children": [
						{
							"cat_id": 102,
							"cat_name": "Xiaomi Book Pro 14 2022",
							"cat_money": 91,
							"cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
						 },
						 {
							"cat_id": 103,
							"cat_name": "Xiaomi Book Pro 16 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2646f1fdf7186b0efa4f0d0c32622874.jpg"
						 },
						 {
							"cat_id": 104,
							"cat_name": "RedmiBook Pro 15 锐龙版",
							"cat_money": 91,
							"cat_icon": "https://i8.mifile.cn/b2c-mimall-media/9b232bbf863196f3a76094b538442d13.jpg"
						 },
						 {
							"cat_id": 105,
							"cat_name": "Redmi Book Pro 15 2022",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg"
						 },
						 {
							"cat_id": 106,
							"cat_name": "小米笔记本 Pro 15 增强版",
							"cat_money": 91,
							"cat_icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44d8d53f2f4122a0e6f3440149271f52.jpg"
						 }
					]
				}
			]
		}
	]
}

效果二 ：左侧点击对应右侧位置，右侧滑动对应左侧菜单

代码如下：

<template>
	<view class="classify-container">
		<view class="container-header">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
				<swiper-item v-for='(item,index) in 8' :key='index'>
					<view class="swiper-item">
						<image class='swiper-img' src="https://yanxuan.nosdn.127.net/static-union/16805163298d320c.jpg"
							mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="container" :style="'height:'+rightScrollMain+'px;'">
			<view class="main" :style="'height:'+rightScrollMain+'px;'">
				<view class="main_left">
					<view v-for="(item,index) in allData" :key="id" class="left_item"
						:class="mainLeftIndex == index ? 'left_item_active' : ''" @click="mainLeftItemTap(index)">
						{{item.name}}
					</view>
				</view>
				<scroll-view class="main_right" scroll-y scroll-with-animation :style="'height:'+rightScrollMain+'px;'"
					:scroll-into-view="intoViewId" @scroll="rightScroll">
					<view class="main_right_box" v-for="(item,index) in allData" :key="item.id"
						:id="'scroll' + item.id">
						<view class="right_tap">
							{{item.name}}
						</view>
						<view class="right_item" v-for="(item,index) in item.list" :key="listId">
							<view class="item_img_box">
								<image class="item_img" :src="item.phoneImg" mode="" />
							</view>
							<view class="item_right">
								<view class="right_title">{{item.title}}</view>
								<view class="right_price">
									￥{{item.price}}
								</view>
								<view class="right_bottom">
									<view class="bottom_left">
										5折
									</view>
									<view class="bottom_right">+</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				allData: [{
						name: 'Xiaomi手机',
						id: 1111,
						list: [{
								title: 'Xiaomi 13',
								price: 4999,
								listId: 1523,
								phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202211292343_1fb2e2ce696643e2e9e863f69cdaf781.png'
							},
							{
								title: 'Xiaomi 13 限量定制色',
								price: 3999,
								listId: 1523,
								phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202211292351_92aba2c69123166a74ba2e2b525b1ae2.png'
							},
							{
								title: 'Xiaomi 12S Ultra',
								price: 4999,
								listId: 1523,
								phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png'
							}, {
								title: 'Xiaomi 12S Pro',
								price: 5999,
								listId: 23,
								phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012000_0b9df066c110f201154013ac373df1d9.png'
							}, {
								title: 'Xiaomi 12S',
								price: 4099,
								listId: 14,
								phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202211292351_92aba2c69123166a74ba2e2b525b1ae2.png'
							}, {
								title: 'Xiaomi 12 Pro 天玑版',
								price: 4199,
								listId: 13,
								phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eac4850d9dbc5305b1298b8c1c686c17.png'
							}, {
								title: 'Xiaomi 12 Pro',
								price: 3199,
								listId: 112,
								phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bec639601906ed7649970c6ab311f992.png'
							}
						]
					},
					{
						name: 'Redmi手机',
						id: 2222,
						list: [{
							title: 'Redmi K60 Pro',
							price: 3299,
							listId: 15223,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212261456_d20c10733b97c9395bd05c97092a4120.png'
						}, {
							title: 'Redmi K60',
							price: 2499,
							listId: 223,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212261429_eb1f972370482850735ca16e2121dd08.png'
						}, {
							title: 'Redmi K50 Pro',
							price: 2699,
							listId: 124,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bfe68c63caca6622d1673efa7d7e7a7d.png'
						}, {
							title: 'Redmi K50',
							price: 2099,
							listId: 133,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/268eb39e48af6bb86e448e143a119eea.png'
						}, {
							title: 'Redmi K40S',
							price: 100,
							listId: 13132,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8705d355125196baa7f8c2df87936290.png'
						}]
					},
					{
						name: '游戏手机',
						id: 3333,
						list: [{
							title: '黑鲨5/黑鲨5 高能版',
							price: 2599,
							listId: 15233,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef619ad3807b50ab8f6d12656fcc3721.png'
						}, {
							title: '黑鲨5 Pro',
							price: 4199,
							listId: 233,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/29d255503783b6838beee713dd5630ec.png'
						}, {
							title: '黑鲨5 RS',
							price: 2799,
							listId: 144,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f77f2b5c0a09d53f739e1cffe3394ca3.png'
						}, {
							title: 'K50 电竞版',
							price: 3299,
							listId: 135,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5d5806d6807671fd2a28d9a944b5358.png'
						}, {
							title: '黑鲨5/黑鲨5 高能版',
							price: 2599,
							listId: 1124,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f77f2b5c0a09d53f739e1cffe3394ca3.png'
						}, {
							title: '黑鲨5 Pro',
							price: 4199,
							listId: 233,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f77f2b5c0a09d53f739e1cffe3394ca3.png'
						}, {
							title: '黑鲨5 RS',
							price: 4199,
							listId: 233,
							phoneImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f77f2b5c0a09d53f739e1cffe3394ca3.png'
						}]
					}
				], // 所有产品数据
				mainLeftIndex: 0, // 左边高亮下标
				intoViewId: null, // 滚动到指定位置id
				mainDistance: 0, // 存放滚动的高度
				heightArr: [], // 存放每个类目的高度
				heightNumber: 0, // 一次递增的累积高度
				windowHeight: 0,
				rightScrollMain: 0,
			}
		},
		methods: {
			// 获取所有商品数据
			getProductAllData() {
				let heightArr = [] 
				let heightNumber = 0 // 一次递增的累积高度
				const _dataLength = this.allData.length // 类目数量
				for (let i = 0; i < _dataLength; i++) {
					// 50 为类目的标题高度 200 为每个产品的高度
					let height = 50 + (200 * this.allData[i].list.length)
				 // 我们与上一个高度相加
					heightNumber += height
					// +=  等于  heightNumber = heightNumber + height
					// 因为我们设置的是rpx，我们需要将rpx转成px
					heightArr.push(this.rpxTopx(heightNumber))
				}
				this.heightArr = heightArr
			},
			// rpx转px
			rpxTopx(rpx) {
				const screenWidth = uni.getSystemInfoSync().screenWidth
				return (screenWidth * Number.parseInt(rpx)) / 750
			},
			// 导航左边点击
			mainLeftItemTap(idx) {
				this.mainLeftIndex = idx
				this.intoViewId = 'scroll' + this.allData[idx].id
			},
			// 右侧滚动触发
			rightScroll(e) {
				const {
					scrollTop
				} = e.detail
				let _index = this.mainLeftIndex // 左边的高亮下标
				if (scrollTop > this.mainDistance) { // 如果大于mainDistance表示用户上滑
					if (_index + 1 < this.heightArr.length && scrollTop >= this.heightArr[_index]) {
						this.mainLeftIndex = _index + 1
					}
				} else { // 用户下滑
					// 先判断下标-1要大于0（左边标签第一个时就不减了）
					// 再判断用户滚动高度是否小于下标上一个总高度，如果小于就-1
					if (_index - 1 >= 0 && scrollTop < this.heightArr[_index - 1]) {
						this.mainLeftIndex = _index - 1
					}
				}
				this.mainDistance = scrollTop // 最后我们才赋值
			},
		},
		onLoad() {
			this.getProductAllData();
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.windowHeight); // 可使用窗口高度，不包含导航栏
					this.windowHeight = res.windowHeight
				}
			})
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.container-header').boundingClientRect(data => {
				this.rightScrollMain = this.windowHeight - data.height
			}).exec();
		}
	}
</script>
<style lang="scss">
	.classify-container {
		.container-header {
			swiper {
				width: 100%;
				height: 360rpx;
			}

			.swiper-img {
				width: 100%;
				height: 360rpx;
			}
		}
	}

	.container {
		--borderColor: rgba(230, 224, 224, 0.733);
		border-radius: 10rpx 10rpx 0 0;
		margin-top: -10rpx;
		background-color: #fff;
		font-size: 32rpx;

		.cont_title {
			width: 140rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-bottom: 6rpx solid #000;
			margin: 0 auto;
			font-weight: 500;
			font-size: 36rpx;
			box-sizing: border-box;
		}

		.cont_info {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 2rpx solid var(--borderColor);

			.info_left {
				color: gray;
			}

			.info_right {
				color: rgb(50, 36, 247);
				height: 100%;
				line-height: 80rpx;

				.right_img {
					width: 30rpx;
					height: 30rpx;
					margin-top: -6rpx;
					vertical-align: middle;
				}
			}
		}

		.main {
			width: 100%;
			// height: calc(100vh - 80rpx - 80rpx - 300rpx + 10rpx);
			display: flex;
			font-size: 32rpx;

			.main_left {
				width: 200rpx;
				border-right: 2rpx solid var(--borderColor);
				color: gray;
				height: 100%;

				.left_item {
					width: 100%;
					height: 120rpx;
					line-height: 120rpx;
					padding: 20rpx;
					box-sizing: border-box;
					font-size: 24rpx // overflow: hidden;
				}

				.left_item_active {
					color: #000;
					font-weight: 500;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						width: 10rpx;
						height: 40rpx;
						background-color: red;
						top: 50%;
						left: 0;
						transform: translateX(-50%);
					}
				}
			}

			.main_right {
				flex: 1;
				padding: 10rpx;
				box-sizing: border-box;

				.right_tap {
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					font-weight: 700;
					font-size: 30rpx;
					position: sticky;
					top: 0;
					background-color: #fff;
				}

				.right_item {
					display: flex;
					font-size: 36rpx;

					.item_img_box {
						width: 200rpx;
						height: 200rpx;
						padding: 10rpx;
						box-sizing: border-box;
						flex-shrink: 0;

						.item_img {
							width: 100%;
							height: 100%;
						}
					}

					.item_right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 10rpx;
						box-sizing: border-box;

						.right_title {
							font-weight: 500;
							font-size: 26rpx;
						}

						.right_price {
							color: rgb(226, 51, 51);
							font-weight: 500;
						}

						.right_bottom {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 300rpx;

							.bottom_left {
								border: 3rpx solid red;
								font-size: 24rpx;
								color: red;
								height: 30rpx;
								line-height: 30rpx;
								padding: 0 6rpx;
							}

							.bottom_right {
								background-color: red;
								color: #fff;
								border-radius: 6rpx;
								width: 40rpx;
								height: 40rpx;
								line-height: 34rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
</style>

 

青田。
关注
专栏目录
uniapp 自定义菜单页面 顶部侧边菜单效果
weixin_45650243的博客
05-05 1323
最近需要实现一个多维数组展示的菜单效果，找来找去没有找到合适的插件，只能手写一个了，效果如下：代码如下，做个参考把，里面的数据也是我mock的假数据，可以参考下思路哈 由于只是demo，所以可能效果 不是特别好，仅仅是想给大家提供个思路哈，如果有更好的写法可以一起探讨~
uniapp实现可滑动选项卡
01-18
本文实例为大家分享了uniapp实现可滑动选项卡的具体代码，供大家参考，具体内容如下 tabControl-tag.vue <view class=tabList :style=isEquall
uniapp 导航条左侧自定义图标
weixin_45159207的博客
08-14 206
使用字体图标时 unicode 字符表示必须"\u’开头，如“\ue606”(注意不能写成\e606"
uniapp联动左侧导航栏分类？
zybijiso666的博客
12-09 927
【代码】uniapp联动左侧导航栏分类？
uniapp 左右滚动
qq_33240556的博客
08-05 797
这些工具各有优势，选择时可以根据个人的需求和偏好来决定。例如，如果你更倾向于一个图形化的界面，那么Remmina或SecureCRT可能是更好的选择。而如果你需要一个轻量级的工具，PuTTY则是一个不错的选择。对于跨平台支持的需求，WindTerm或FinalShell可能更加合适。对于Linux运维工作而言，远程连接工具是非常重要的。希望这些信息对你有帮助！如果你需要了解某一款工具的具体使用方法或者有其他问题，请随时告诉我。
uniapp 侧边栏组件
weixin_50903205的博客
08-27 3141
uniapp 侧边栏组件
uniapp制作app与小程序前端——侧边导航栏
hk_hkl的博客
05-10 2179
手把手玩转uniapp前端No.6
uniapp侧边选项卡的代码
最新发布
08-15
在UniApp中创建侧边选项卡（也称为抽屉或导航栏）通常涉及使用`uni-app-router`和自定义组件。这里是一个简单的例子，展示如何在页面结构中添加侧边选项卡： ```html <!-- app.vue --> <!-- 使用 drawer 组件...
uniapp 侧边选项卡组件
09-15
UniApp 有一个内置的 TabBar 组件，可以用于创建侧边选项卡。TabBar 组件可以在页面底部或顶部显示一组选项卡，用户可以通过点击选项卡来切换页面。 要在 UniApp 中使用 TabBar 组件作为侧边选项卡，你可以按照以下...
uniapp框架-侧边导航分类,适合商品分类页面组件-uni-app项目源码-vue语法格式.zip
05-21
UniApp开发前景分析：专业视角引领未来 随着移动互联网的迅猛发展，跨平台应用开发框架UniApp以其独特的优势，展现出广阔的开发前景。 UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和...
uni-app之如何实现简单的选项卡
beichenxiansen的博客
05-27 1724
时隔许久，我又一次用到了uni-app，又一次 开发小程序。这次记录的是uni-app如何实现简单的选项卡。 话不多说，直奔主题 首先在html中 <view> <view class="inv-h-w"> <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">选项卡1</view> <view :class="['inv
uniapp实现可以左右滑动导航栏
01-18
本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码，供大家参考，具体内容如下 <vi
卡片叠加效果（左右滑动）
02-19
卡片用UICollectionView来无限轮播，重写UICollectionViewFlowLayout
uniapp-菜单组件
04-11
uni-app 菜单组件，flex布局 <!-- author hzj email hzj_51it@aliyun.com wechat XHKJ_IT 菜单组件 v0.01 参数： 属性 类型 说明 top Number 菜单项距离顶部的位置 menuList Array 菜单具体项：url 需要跳转的地址，icon：图标，txt：文字内容，type ：跳转方式==navigate，redirect，reLaunch，switchTab，navigateBack
uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip
12-17
uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip
uniapp中制作侧边导航栏
子玉的博客
12-10 2163
.sidebar-container`是一个Flex容器，其中包含了`.sidebar`和`.main-content`两个子元素。如果你想制作一个简单的侧边导航栏，并且不使用额外的组件库，可以使用uni-app提供的基础组件和样式来实现。`.sidebar`是侧边导航栏的容器，具有固定的宽度和背景色。`.sidebar-header`是导航栏的标题部分，`.sidebar-menu`是菜单项的容器。很抱歉，我之前提到的示例中使用的组件是基于Uni-app框架的组件库，使用前需要在项目中安装相应的依赖。
【侧边滑动滚动分类】uniapp 联动侧边栏导航分类
AAAXiaoApple的博客
06-17 1077
【侧边滑动滚动分类】uniapp 联动侧边栏导航分类
uniapp 左右滑动模块/页面
weixin_47168811的博客
08-28 1597
uniapp 左右滑动模块/页面，头部导航栏点击切换
手势滑动侧边栏 uniapp(vue3)
ZL3064436257的博客
10-30 329
手势滑动侧边栏 uniapp(vue3)
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值