uniapp 联动侧边栏导航分类(完整版1)

<template>
	<view class="page-body" :style="'height:' + height + 'px'">
		<scroll-view class="nav-left" scroll-y :style="'height:' + height + 'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
			<view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index == categoryActive ? 'active' : ''" v-for="(item, index) in classifyData">
				{{ item.name }}
			view>
		scroll-view>
		<scroll-view 
		class="nav-right" 
		scroll-y 
		:scroll-top="scrollTop" 
		@scroll="scroll" 
		:style="'height:' + height + 'px'" 
		scroll-with-animation
		>
			<view v-for="(foods, index) in classifyData" :key="index" class="box">
				<view>{{foods.name}}view>
				<view :id="i == 0 ? 'first' : ''" class="nav-right-item" v-for="(item, i) in foods.foods" :key="i" @click="cart(item.name)">
					<image src="../../static/logo.png" />
					<view>{{ item.name }}view>
				view>
			view>
		scroll-view>
	view>
template>

<script>
import classifyData from '../../common/classify.data.js';
export default {
	data() {
		return {
			name: 'wkiwi',
			height: 0,
			categoryActive: 0,
			scrollTop: 0,
			scrollLeftTop: 0,
			// scrollHeight: 0,
			classifyData: classifyData,
			arr: [0, 584, 1168, 1752, 2336, 2805, 3274, 3858, 4442, 4911, 5380, 5734, 6203, 6672, 7017], //初始值,后边计算会根据手机适配覆盖
			leftItemHeight: 51, //49行会计算出新值进行覆盖
			navLeftHeight: 0, //左边scroll-view 内层nav的总高度
			diff: 0, //左边scroll-view 内层nav的总高度与视口之差
			tabBarHeight: 0 //如果此页面为Tab页面,自己改变高度值,,一般tab高度为51
		};
	},
	created() {
		//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
		// this.$nextTick(()=>{
		// 	this.getHeightList();
		// })
	},
	onLoad: function() {
		this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
	},
	onReady() {
		this.getHeightList();
	},
	methods: {
		getHeightList() {
			let _this = this;
			let selectorQuery = uni.createSelectorQuery();
			selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
				_this.leftItemHeight = rects[0].height;
				_this.navLeftHeight = _this.leftItemHeight * classifyData.length;
				_this.diff = _this.navLeftHeight - _this.height;
			});
			selectorQuery
				.selectAll('.box')
				.boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect) {
						// 					rect.id      // 节点的ID
						// 					rect.dataset // 节点的dataset
						// 					rect.left    // 节点的左边界坐标
						// 					rect.right   // 节点的右边界坐标
						// 					rect.top     // 节点的上边界坐标
						// 					rect.bottom  // 节点的下边界坐标
						// 					rect.width   // 节点的宽度
						// 					rect.height  // 节点的高度
						top += rect.height;
						arr.push(top);
					});
					console.log(arr);
					_this.arr = arr;
				})
				.exec();
		},
		scroll(e) {
			let _this = this;
			if (this.timeoutId) {
				clearTimeout(this.timeoutId);
			}
			this.timeoutId = setTimeout(function() {
				//节流
				_this.scrollHeight = e.detail.scrollTop + 1 + _this.height / 2;
				//+1不要删除,解决最后一项某种情况下翻到底部,左边按钮并不会切换至最后一个
				//若想使切换参考线为屏幕顶部请删除 _this.height/2
				for (let i = 0; i < _this.arr.length; i++) {
					let height1 = _this.arr[i];
					let height2 = _this.arr[i + 1];
					if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
						_this.categoryActive = i;
						_this.diff > 0 && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff) / (classifyData.length - 1)));
						return false;
					}
				}
				_this.categoryActive = 0;
				_this.timeoutId = undefined;
			}, 10);
		},
		categoryClickMain(index) {
			this.categoryActive = index;
			this.scrollTop == this.arr[index] ? (this.scrollTop = this.scrollTop + 1) : (this.scrollTop = this.arr[index]); //防止两次相等造成点击不触发滚动时间
		},
		cart: function(text) {
			uni.showToast({
				title: text,
				icon: 'none'
			});
		}
	},
	components: {}
};
script>

<style>
.page-body {
	display: flex;
	background: #fff;
	overflow: hidden;
}

.nav {
	display: flex;
	width: 100%;
}

.nav-left {
	width: 25%;
	background: #fafafa;
}

.nav-left-item {
	height: 100upx;
	border-right: solid 1px #f1f1f1;
	border-bottom: solid 1px #f1f1f1;
	font-size: 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-left-item:last-child {
	border-bottom: none;
}
.nav-right {
	width: 75%;
}
.box {
	display: block;
	overflow: hidden;
	border-bottom: 20upx solid #f3f3f3;
	/* min-height: 100vh; */
	/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
}
.box:last-child {
	border: none;
	min-height: 100vh;
}
.nav-right-item {
	width: 28%;
	height: 220upx;
	float: left;
	text-align: center;
	padding: 11upx;
	font-size: 28upx;
	background: #fff;
}

.nav-right-item image {
	width: 150upx;
	height: 150upx;
}

.active {
	color: #ff80ab;
	background: #fff;
	border-right: 0;
}
::-webkit-scrollbar {
	/*取消小程序的默认导航条样式*/
	width: 0;
	height: 0;
	color: transparent;
}
style>

引用的 JS文件:

export default [{
		"name": "女装",
		"foods": [{
				"name": "A字裙",
				"key": "A字裙",
				"icon": "http://img.kiwifruits.cn/classify/1/1.jpg",
				"cat": 10
			},
			{
				"name": "T恤",
				"key": "T恤",
				"icon": "http://img.kiwifruits.cn/classify/1/2.jpg",
				"cat": 10
			},
			{
				"name": "半身裙",
				"key": "半身裙",
				"icon": "http://img.kiwifruits.cn/classify/1/3.jpg",
				"cat": 10
			},
			{
				"name": "衬衫",
				"key": "衬衫",
				"icon": "http://img.kiwifruits.cn/classify/1/4.jpg",
				"cat": 10
			},
			{
				"name": "短裙",
				"key": "短裙",
				"icon": "http://img.kiwifruits.cn/classify/1/5.jpg",
				"cat": 10
			},
			{
				"name": "阔腿裤",
				"key": "阔腿裤",
				"icon": "http://img.kiwifruits.cn/classify/1/6.jpg",
				"cat": 10
			},
			{
				"name": "连衣裙",
				"key": "连衣裙",
				"icon": "http://img.kiwifruits.cn/classify/1/7.jpg",
				"cat": 10
			},
			{
				"name": "妈妈装",
				"key": "妈妈装",
				"icon": "http://img.kiwifruits.cn/classify/1/8.jpg",
				"cat": 10
			},
			{
				"name": "牛仔裤",
				"key": "牛仔裤",
				"icon": "http://img.kiwifruits.cn/classify/1/9.jpg",
				"cat": 10
			},
			{
				"name": "情侣装",
				"key": "情侣装",
				"icon": "http://img.kiwifruits.cn/classify/1/10.jpg",
				"cat": 10
			},
			{
				"name": "休闲裤",
				"key": "休闲裤",
				"icon": "http://img.kiwifruits.cn/classify/1/11.jpg",
				"cat": 10
			},
			{
				"name": "雪纺衫",
				"key": "雪纺衫",
				"icon": "http://img.kiwifruits.cn/classify/1/12.jpg",
				"cat": 10
			},
			{
				"name": "防晒衣",
				"key": "防晒衣",
				"icon": "http://img.kiwifruits.cn/classify/1/13.jpg",
				"cat": 10
			},
			{
				"name": "礼服/婚纱",
				"key": "礼服婚纱",
				"icon": "http://img.kiwifruits.cn/classify/1/14.jpg",
				"cat": 10
			}
		]
	},
	{
		"name": "美食",
		"foods": [{
				"name": "火锅",
				"key": "火锅",
				"icon": "http://img.kiwifruits.cn/classify/2/1.jpg",
				"cat": 6
			},
			{
				"name": "糕点饼干",
				"key": "糕点饼干",
				"icon": "http://img.kiwifruits.cn/classify/2/2.jpg",
				"cat": 6
			},
			{
				"name": "坚果果干",
				"key": "坚果果干",
				"icon": "http://img.kiwifruits.cn/classify/2/3.jpg",
				"cat": 6
			},
			{
				"name": "酒类",
				"key": "酒类",
				"icon": "http://img.kiwifruits.cn/classify/2/4.jpg",
				"cat": 6
			},
			{
				"name": "辣条",
				"key": "辣条",
				"icon": "http://img.kiwifruits.cn/classify/2/5.jpg",
				"cat": 6
			},
			{
				"name": "大礼包",
				"key": "大礼包",
				"icon": "http://img.kiwifruits.cn/classify/2/6.jpg",
				"cat": 6
			},
			{
				"name": "精品茗茶",
				"key": "茶",
				"icon": "http://img.kiwifruits.cn/classify/2/7.jpg",
				"cat": 6
			},
			{
				"name": "休闲食品",
				"key": "休闲食品",
				"icon": "http://img.kiwifruits.cn/classify/2/8.jpg",
				"cat": 6
			},
			{
				"name": "糖果巧克力",
				"key": "糖果巧克力",
				"icon": "http://img.kiwifruits.cn/classify/2/9.jpg",
				"cat": 6
			},
			{
				"name": "方便速食",
				"key": "方便速食",
				"icon": "http://img.kiwifruits.cn/classify/2/10.jpg",
				"cat": 6
			},
			{
				"name": "营养代餐",
				"key": "营养代餐",
				"icon": "http://img.kiwifruits.cn/classify/2/11.jpg",
				"cat": 6
			},
			{
				"name": "粮油副食",
				"key": "粮油",
				"icon": "http://img.kiwifruits.cn/classify/2/12.jpg",
				"cat": 6
			},
			{
				"name": "生鲜水果",
				"key": "水果",
				"icon": "http://img.kiwifruits.cn/classify/2/13.jpg",
				"cat": 6
			},
			{
				"name": "饮品",
				"key": "饮品",
				"icon": "http://img.kiwifruits.cn/classify/2/14.jpg",
				"cat": 6
			}
		]
	},
	{
		"name": "美妆",
		"foods": [{
				"name": "化妆刷",
				"key": "化妆刷",
				"icon": "http://img.kiwifruits.cn/classify/3/1.jpg",
				"cat": 3
			},
			{
				"name": "粉底",
				"key": "粉底",
				"icon": "http://img.kiwifruits.cn/classify/3/2.jpg",
				"cat": 3
			},
			{
				"name": "洗发护发",
				"key": "洗发护发",
				"icon": "http://img.kiwifruits.cn/classify/3/3.jpg",
				"cat": 3
			},
			{
				"name": "美容工具",
				"key": "美容工具",
				"icon": "http://img.kiwifruits.cn/classify/3/4.jpg",
				"cat": 3
			},
			{
				"name": "眼部护理",
				"key": "眼部护理",
				"icon": "http://img.kiwifruits.cn/classify/3/5.jpg",
				"cat": 3
			},
			{
				"name": "眉妆",
				"key": "眉妆",
				"icon": "http://img.kiwifruits.cn/classify/3/6.jpg",
				"cat": 3
			},
			{
				"name": "卸妆品",
				"key": "卸妆品",
				"icon": "http://img.kiwifruits.cn/classify/3/7.jpg",
				"cat": 3
			},
			{
				"name": "基础护肤",
				"key": "基础护肤",
				"icon": "http://img.kiwifruits.cn/classify/3/8.jpg",
				"cat": 3
			},
			{
				"name": "眼妆",
				"key": "眼妆",
				"icon": "http://img.kiwifruits.cn/classify/3/9.jpg",
				"cat": 3
			},
			{
				"name": "唇妆",
				"key": "唇妆",
				"icon": "http://img.kiwifruits.cn/classify/3/10.jpg",
				"cat": 3
			},
			{
				"name": "面膜",
				"key": "面膜",
				"icon": "http://img.kiwifruits.cn/classify/3/11.jpg",
				"cat": 3
			},
			{
				"name": "沐浴用品",
				"key": "沐浴用品",
				"icon": "http://img.kiwifruits.cn/classify/3/12.jpg",
				"cat": 3
			},
			{
				"name": "护肤套装",
				"key": "护肤套装",
				"icon": "http://img.kiwifruits.cn/classify/3/13.jpg",
				"cat": 3
			},
			{
				"name": "防晒品",
				"key": "防晒品",
				"icon": "http://img.kiwifruits.cn/classify/3/14.jpg",
				"cat": 3
			},
			{
				"name": "美甲",
				"key": "美甲",
				"icon": "http://img.kiwifruits.cn/classify/3/15.jpg",
				"cat": 3
			}

		]
	},
	{
		"name": "居家日用",
		"foods": [{
				"name": "垃圾袋",
				"key": "垃圾袋",
				"icon": "http://img.kiwifruits.cn/classify/4/1.jpg",
				"cat": 4
			},
			{
				"name": "纸巾",
				"key": "纸巾",
				"icon": "http://img.kiwifruits.cn/classify/4/2.jpg",
				"cat": 4
			},
			{
				"name": "驱蚊用品",
				"key": "驱蚊用品",
				"icon": "http://img.kiwifruits.cn/classify/4/3.jpg",
				"cat": 4
			},
			{
				"name": "收纳神器",
				"key": "收纳神器",
				"icon": "http://img.kiwifruits.cn/classify/4/4.jpg",
				"cat": 4
			},
			{
				"name": "厨房用品",
				"key": "厨房用品",
				"icon": "http://img.kiwifruits.cn/classify/4/5.jpg",
				"cat": 4
			},
			{
				"name": "厨房烹饪",
				"key": "烹饪",
				"icon": "http://img.kiwifruits.cn/classify/4/6.jpg",
				"cat": 4
			},
			{
				"name": "衣物晾晒",
				"key": "衣物晾晒",
				"icon": "http://img.kiwifruits.cn/classify/4/7.jpg",
				"cat": 4
			},
			{
				"name": "衣物护理",
				"key": "衣物护理",
				"icon": "http://img.kiwifruits.cn/classify/4/8.jpg",
				"cat": 4
			},
			{
				"name": "宠物用品",
				"key": "宠物用品",
				"icon": "http://img.kiwifruits.cn/classify/4/9.jpg",
				"cat": 4
			},
			{
				"name": "医药保健",
				"key": "医药",
				"icon": "http://img.kiwifruits.cn/classify/4/10.jpg",
				"cat": 4
			},
			{
				"name": "日用百货",
				"key": "百货",
				"icon": "http://img.kiwifruits.cn/classify/4/11.jpg",
				"cat": 4
			},
			{
				"name": "清洁用品",
				"key": "清洁",
				"icon": "http://img.kiwifruits.cn/classify/4/12.jpg",
				"cat": 4
			},
			{
				"name": "绿植园艺",
				"key": "绿植",
				"icon": "http://img.kiwifruits.cn/classify/4/13.jpg",
				"cat": 4
			}
		]
	},
	{
		"name": "男装",
		"foods": [{
				"name": "爸爸装",
				"key": "爸爸装",
				"icon": "http://img.kiwifruits.cn/classify/5/1.jpg",
				"cat": 12
			},
			{
				"name": "牛仔裤",
				"key": "牛仔裤",
				"icon": "http://img.kiwifruits.cn/classify/5/2.jpg",
				"cat": 12
			},
			{
				"name": "衬衫",
				"key": "衬衫",
				"icon": "http://img.kiwifruits.cn/classify/5/3.jpg",
				"cat": 12
			},
			{
				"name": "休闲裤",
				"key": "休闲裤",
				"icon": "http://img.kiwifruits.cn/classify/5/4.jpg",
				"cat": 12
			},
			{
				"name": "外套",
				"key": "外套",
				"icon": "http://img.kiwifruits.cn/classify/5/5.jpg",
				"cat": 12
			},
			{
				"name": "T恤",
				"key": "T恤",
				"icon": "http://img.kiwifruits.cn/classify/5/6.jpg",
				"cat": 12
			},
			{
				"name": "套装",
				"key": "套装",
				"icon": "http://img.kiwifruits.cn/classify/5/7.jpg",
				"cat": 12
			},
			{
				"name": "运动裤",
				"key": "运动裤",
				"icon": "http://img.kiwifruits.cn/classify/5/8.jpg",
				"cat": 12
			},
			{
				"name": "马甲/背心",
				"key": "马甲背心",
				"icon": "http://img.kiwifruits.cn/classify/5/9.jpg",
				"cat": 12
			},
			{
				"name": "POLO衫",
				"key": "POLO衫",
				"icon": "http://img.kiwifruits.cn/classify/5/10.jpg",
				"cat": 12
			},
			{
				"name": "商务装",
				"key": "商务装",
				"icon": "http://img.kiwifruits.cn/classify/5/11.jpg",
				"cat": 12
			}
		]
	},
	{
		"name": "鞋品",
		"foods": [{
				"name": "单鞋",
				"key": "单鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/1.jpg",
				"cat": 5
			},
			{
				"name": "皮鞋",
				"key": "皮鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/2.jpg",
				"cat": 5
			},
			{
				"name": "帆布鞋",
				"key": "帆布鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/3.jpg",
				"cat": 5
			},
			{
				"name": "北京老布鞋",
				"key": "北京老布鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/4.jpg",
				"cat": 5
			},
			{
				"name": "运动鞋",
				"key": "运动鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/5.jpg",
				"cat": 5
			},
			{
				"name": "拖鞋",
				"key": "拖鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/6.jpg",
				"cat": 5
			},
			{
				"name": "凉鞋",
				"key": "凉鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/7.jpg",
				"cat": 5
			},
			{
				"name": "休闲鞋",
				"key": "休闲鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/8.jpg",
				"cat": 5
			},
			{
				"name": "高跟鞋",
				"key": "高跟鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/9.jpg",
				"cat": 5
			},
			{
				"name": "老人鞋",
				"key": "老人鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/10.jpg",
				"cat": 5
			},
			{
				"name": "懒人鞋",
				"key": "懒人鞋",
				"icon": "http://img.kiwifruits.cn/classify/6/11.jpg",
				"cat": 5
			}
		]
	},
	{
		"name": "数码家电",
		"foods": [{
				"name": "数据线",
				"key": "数据线",
				"icon": "http://img.kiwifruits.cn/classify/7/1.jpg",
				"cat": 8
			},
			{
				"name": "耳机",
				"key": "耳机",
				"icon": "http://img.kiwifruits.cn/classify/7/2.jpg",
				"cat": 8
			},
			{
				"name": "生活家电",
				"key": "家电",
				"icon": "http://img.kiwifruits.cn/classify/7/3.jpg",
				"cat": 8
			},
			{
				"name": "电风扇",
				"key": "电风扇",
				"icon": "http://img.kiwifruits.cn/classify/7/4.jpg",
				"cat": 8
			},
			{
				"name": "电吹风",
				"key": "电吹风",
				"icon": "http://img.kiwifruits.cn/classify/7/5.jpg",
				"cat": 8
			},
			{
				"name": "手机壳",
				"key": "手机壳",
				"icon": "http://img.kiwifruits.cn/classify/7/6.jpg",
				"cat": 8
			},
			{
				"name": "榨汁机",
				"key": "榨汁机",
				"icon": "http://img.kiwifruits.cn/classify/7/7.jpg",
				"cat": 8
			},
			{
				"name": "小家电",
				"key": "小家电",
				"icon": "http://img.kiwifruits.cn/classify/7/8.jpg",
				"cat": 8
			},
			{
				"name": "数码电子",
				"key": "数码",
				"icon": "http://img.kiwifruits.cn/classify/7/9.jpg",
				"cat": 8
			},
			{
				"name": "电饭锅",
				"key": "电饭锅",
				"icon": "http://img.kiwifruits.cn/classify/7/10.jpg",
				"cat": 8
			},
			{
				"name": "手机支架",
				"key": "手机支架",
				"icon": "http://img.kiwifruits.cn/classify/7/11.jpg",
				"cat": 8
			},
			{
				"name": "剃须刀",
				"key": "剃须刀",
				"icon": "http://img.kiwifruits.cn/classify/7/12.jpg",
				"cat": 8
			},
			{
				"name": "充电宝",
				"key": "充电宝",
				"icon": "http://img.kiwifruits.cn/classify/7/13.jpg",
				"cat": 8
			},
			{
				"name": "手机配件",
				"key": "手机配件",
				"icon": "http://img.kiwifruits.cn/classify/7/14.jpg",
				"cat": 8
			}
		]
	},
	{
		"name": "母婴",
		"foods": [{
				"name": "婴童服饰",
				"key": "衣服",
				"icon": "http://img.kiwifruits.cn/classify/8/1.jpg",
				"cat": 2
			},
			{
				"name": "玩具乐器",
				"key": "玩具乐器",
				"icon": "http://img.kiwifruits.cn/classify/8/2.jpg",
				"cat": 2
			},
			{
				"name": "尿不湿",
				"key": "尿不湿",
				"icon": "http://img.kiwifruits.cn/classify/8/3.jpg",
				"cat": 2
			},
			{
				"name": "安抚牙胶",
				"key": "安抚牙胶",
				"icon": "http://img.kiwifruits.cn/classify/8/4.jpg",
				"cat": 2
			},
			{
				"name": "奶瓶奶嘴",
				"key": "奶瓶奶嘴",
				"icon": "http://img.kiwifruits.cn/classify/8/5.jpg",
				"cat": 2
			},
			{
				"name": "孕妈用品",
				"key": "孕妈用品",
				"icon": "http://img.kiwifruits.cn/classify/8/6.jpg",
				"cat": 2
			},
			{
				"name": "宝宝用品",
				"key": "宝宝用品",
				"icon": "http://img.kiwifruits.cn/classify/8/7.jpg",
				"cat": 2
			},
			{
				"name": "婴童湿巾",
				"key": "湿巾",
				"icon": "http://img.kiwifruits.cn/classify/8/8.jpg",
				"cat": 2
			},
			{
				"name": "喂养洗护",
				"key": "洗护",
				"icon": "http://img.kiwifruits.cn/classify/8/9.jpg",
				"cat": 2
			},
			{
				"name": "婴童鞋靴",
				"key": "童鞋",
				"icon": "http://img.kiwifruits.cn/classify/8/10.jpg",
				"cat": 2
			},
			{
				"name": "口水巾",
				"key": "口水巾",
				"icon": "http://img.kiwifruits.cn/classify/8/11.jpg",
				"cat": 2
			},
			{
				"name": "营养辅食",
				"key": "营养",
				"icon": "http://img.kiwifruits.cn/classify/8/12.jpg",
				"cat": 2
			},
			{
				"name": "婴幼书籍",
				"key": "书籍",
				"icon": "http://img.kiwifruits.cn/classify/8/13.jpg",
				"cat": 2
			},
			{
				"name": "婴儿车",
				"key": "婴儿车",
				"icon": "http://img.kiwifruits.cn/classify/8/14.jpg",
				"cat": 2
			}
		]
	},
	{
		"name": "箱包",
		"foods": [{
				"name": "单肩包",
				"key": "单肩包",
				"icon": "http://img.kiwifruits.cn/classify/9/1.jpg",
				"cat": 0
			},
			{
				"name": "斜挎包",
				"key": "斜挎包",
				"icon": "http://img.kiwifruits.cn/classify/9/2.jpg",
				"cat": 0
			},
			{
				"name": "女包",
				"key": "女包",
				"icon": "http://img.kiwifruits.cn/classify/9/3.jpg",
				"cat": 0
			},
			{
				"name": "男包",
				"key": "男包",
				"icon": "http://img.kiwifruits.cn/classify/9/4.jpg",
				"cat": 0
			},
			{
				"name": "双肩包",
				"key": "双肩包",
				"icon": "http://img.kiwifruits.cn/classify/9/5.jpg",
				"cat": 0
			},
			{
				"name": "小方包",
				"key": "小方包",
				"icon": "http://img.kiwifruits.cn/classify/9/6.jpg",
				"cat": 0
			},
			{
				"name": "钱包",
				"key": "钱包",
				"icon": "http://img.kiwifruits.cn/classify/9/7.jpg",
				"cat": 0
			},
			{
				"name": "旅行箱包",
				"key": "旅行箱包",
				"icon": "http://img.kiwifruits.cn/classify/9/8.jpg",
				"cat": 0
			},
			{
				"name": "零钱包",
				"key": "零钱包",
				"icon": "http://img.kiwifruits.cn/classify/9/9.jpg",
				"cat": 0
			},
			{
				"name": "手提包",
				"key": "手提包",
				"icon": "http://img.kiwifruits.cn/classify/9/10.jpg",
				"cat": 0
			},
			{
				"name": "胸包",
				"key": "胸包",
				"icon": "http://img.kiwifruits.cn/classify/9/11.jpg",
				"cat": 0
			}
		]
	},
	{
		"name": "内衣",
		"foods": [{
				"name": "袜子",
				"key": "袜子",
				"icon": "http://img.kiwifruits.cn/classify/10/1.jpg",
				"cat": 11
			},
			{
				"name": "吊带背心",
				"key": "吊带背心",
				"icon": "http://img.kiwifruits.cn/classify/10/2.jpg",
				"cat": 11
			},
			{
				"name": "抹胸",
				"key": "抹胸",
				"icon": "http://img.kiwifruits.cn/classify/10/3.jpg",
				"cat": 11
			},
			{
				"name": "内裤",
				"key": "内裤",
				"icon": "http://img.kiwifruits.cn/classify/10/4.jpg",
				"cat": 11
			},
			{
				"name": "文胸",
				"key": "文胸",
				"icon": "http://img.kiwifruits.cn/classify/10/5.jpg",
				"cat": 11
			},
			{
				"name": "文胸套装",
				"key": "文胸套装",
				"icon": "http://img.kiwifruits.cn/classify/10/6.jpg",
				"cat": 11
			},
			{
				"name": "打底塑身",
				"key": "打底塑身",
				"icon": "http://img.kiwifruits.cn/classify/10/7.jpg",
				"cat": 11
			},
			{
				"name": "家居服",
				"key": "家居服",
				"icon": "http://img.kiwifruits.cn/classify/10/8.jpg",
				"cat": 11
			},
			{
				"name": "船袜",
				"key": "船袜",
				"icon": "http://img.kiwifruits.cn/classify/10/9.jpg",
				"cat": 11
			},
			{
				"name": "情侣睡衣",
				"key": "情侣睡衣",
				"icon": "http://img.kiwifruits.cn/classify/10/10.jpg",
				"cat": 11
			},
			{
				"name": "丝袜",
				"key": "丝袜",
				"icon": "http://img.kiwifruits.cn/classify/10/11.jpg",
				"cat": 11
			}
		]
	},
	{
		"name": "文娱车品",
		"foods": [{
				"name": "车市车品",
				"key": "车市车品",
				"icon": "http://img.kiwifruits.cn/classify/11/1.jpg",
				"cat": 7
			},
			{
				"name": "办公文具",
				"key": "办公文具",
				"icon": "http://img.kiwifruits.cn/classify/11/2.jpg",
				"cat": 7
			},
			{
				"name": "考试必备",
				"key": "考试必备",
				"icon": "http://img.kiwifruits.cn/classify/11/3.jpg",
				"cat": 7
			},
			{
				"name": "笔记本",
				"key": "笔记本",
				"icon": "http://img.kiwifruits.cn/classify/11/4.jpg",
				"cat": 7
			},
			{
				"name": "艺术礼品",
				"key": "礼品",
				"icon": "http://img.kiwifruits.cn/classify/11/5.jpg",
				"cat": 7
			},
			{
				"name": "书写工具",
				"key": "书写工具",
				"icon": "http://img.kiwifruits.cn/classify/11/6.jpg",
				"cat": 7
			},
			{
				"name": "车载电器",
				"key": "车载电器",
				"icon": "http://img.kiwifruits.cn/classify/11/7.jpg",
				"cat": 7
			},
			{
				"name": "图书音像",
				"key": "图书音像",
				"icon": "http://img.kiwifruits.cn/classify/11/8.jpg",
				"cat": 7
			},
			{
				"name": "画具画材",
				"key": "画具画材",
				"icon": "http://img.kiwifruits.cn/classify/11/9.jpg",
				"cat": 7
			}
		]
	},
	{
		"name": "配饰",
		"foods": [{
				"name": "太阳镜",
				"key": "太阳镜",
				"icon": "http://img.kiwifruits.cn/classify/12/1.jpg",
				"cat": 0
			},
			{
				"name": "皮带",
				"key": "皮带",
				"icon": "http://img.kiwifruits.cn/classify/12/2.jpg",
				"cat": 0
			},
			{
				"name": "棒球帽",
				"key": "棒球帽",
				"icon": "http://img.kiwifruits.cn/classify/12/3.jpg",
				"cat": 0
			},
			{
				"name": "手表",
				"key": "手表",
				"icon": "http://img.kiwifruits.cn/classify/12/4.jpg",
				"cat": 0
			},
			{
				"name": "发饰",
				"key": "发饰",
				"icon": "http://img.kiwifruits.cn/classify/12/5.jpg",
				"cat": 0
			},
			{
				"name": "项链",
				"key": "项链",
				"icon": "http://img.kiwifruits.cn/classify/12/6.jpg",
				"cat": 0
			},
			{
				"name": "手饰",
				"key": "手饰",
				"icon": "http://img.kiwifruits.cn/classify/12/7.jpg",
				"cat": 0
			},
			{
				"name": "耳环",
				"key": "耳环",
				"icon": "http://img.kiwifruits.cn/classify/12/8.jpg",
				"cat": 0
			},
			{
				"name": "帽子丝巾",
				"key": "帽子丝巾",
				"icon": "http://img.kiwifruits.cn/classify/12/9.jpg",
				"cat": 0
			},
			{
				"name": "眼镜墨镜",
				"key": "眼镜墨镜",
				"icon": "http://img.kiwifruits.cn/classify/12/10.jpg",
				"cat": 0
			},
			{
				"name": "发带发箍",
				"key": "发带发箍",
				"icon": "http://img.kiwifruits.cn/classify/12/11.jpg",
				"cat": 0
			}
		]
	},
	{
		"name": "家装家纺",
		"foods": [{
				"name": "家居饰品",
				"key": "家居饰品",
				"icon": "http://img.kiwifruits.cn/classify/13/1.jpg",
				"cat": 0
			},
			{
				"name": "凉席",
				"key": "凉席",
				"icon": "http://img.kiwifruits.cn/classify/13/2.jpg",
				"cat": 0
			},
			{
				"name": "背枕靠枕",
				"key": "靠枕",
				"icon": "http://img.kiwifruits.cn/classify/13/3.jpg",
				"cat": 0
			},
			{
				"name": "床上用品",
				"key": "床上用品",
				"icon": "http://img.kiwifruits.cn/classify/13/4.jpg",
				"cat": 0
			},
			{
				"name": "摆件",
				"key": "摆件",
				"icon": "http://img.kiwifruits.cn/classify/13/5.jpg",
				"cat": 0
			},
			{
				"name": "四件套",
				"key": "四件套",
				"icon": "http://img.kiwifruits.cn/classify/13/6.jpg",
				"cat": 0
			},
			{
				"name": "装饰品",
				"key": "装饰品",
				"icon": "http://img.kiwifruits.cn/classify/13/7.jpg",
				"cat": 0
			},
			{
				"name": "卫浴用品",
				"key": "卫浴",
				"icon": "http://img.kiwifruits.cn/classify/13/8.jpg",
				"cat": 0
			},
			{
				"name": "家居家装",
				"key": "家具",
				"icon": "http://img.kiwifruits.cn/classify/13/9.jpg",
				"cat": 0
			},
			{
				"name": "蚊帐",
				"key": "蚊帐",
				"icon": "http://img.kiwifruits.cn/classify/13/10.jpg",
				"cat": 0
			},
			{
				"name": "墙纸贴纸",
				"key": "墙纸",
				"icon": "http://img.kiwifruits.cn/classify/13/11.jpg",
				"cat": 0
			},
			{
				"name": "空调被",
				"key": "空调被",
				"icon": "http://img.kiwifruits.cn/classify/13/12.jpg",
				"cat": 0
			}
		]
	},
	{
		"name": "户外运动",
		"foods": [{
				"name": "游泳装备",
				"key": "游泳",
				"icon": "http://img.kiwifruits.cn/classify/14/1.jpg",
				"cat": 0
			},
			{
				"name": "泳镜",
				"key": "泳镜",
				"icon": "http://img.kiwifruits.cn/classify/14/2.jpg",
				"cat": 0
			},
			{
				"name": "户外装备",
				"key": "户外",
				"icon": "http://img.kiwifruits.cn/classify/14/3.jpg",
				"cat": 0
			},
			{
				"name": "健身服饰",
				"key": "健身",
				"icon": "http://img.kiwifruits.cn/classify/14/4.jpg",
				"cat": 0
			},
			{
				"name": "泳衣",
				"key": "泳衣",
				"icon": "http://img.kiwifruits.cn/classify/14/5.jpg",
				"cat": 0
			},
			{
				"name": "瑜伽垫",
				"key": "瑜伽垫",
				"icon": "http://img.kiwifruits.cn/classify/14/6.jpg",
				"cat": 0
			},
			{
				"name": "瑜伽用品",
				"key": "瑜伽",
				"icon": "http://img.kiwifruits.cn/classify/14/7.jpg",
				"cat": 0
			},
			{
				"name": "健身装备",
				"key": "健身",
				"icon": "http://img.kiwifruits.cn/classify/14/8.jpg",
				"cat": 0
			},
			{
				"name": "球迷用品",
				"key": "球迷",
				"icon": "http://img.kiwifruits.cn/classify/14/9.jpg",
				"cat": 0
			}
		]
	}
]

你可能感兴趣的:(uniapp 联动侧边栏导航分类(完整版1))