uniapp 侧边栏组件

<template>
	<div class="side">
		<scroll-view class="side-left" scroll-y >
			<div class="side-left-item" v-for="(item,index) in leftData" @click="categoryClickMain(item)" :key="index" >
				<template v-if="type === 'children'">
					<div class="side-left-item-children ellipsis" 
					:style="[item[fieldKey] === categoryActive ? activeColor : '']"
					>
						<i class="iconfont next" v-if="item[fieldKey] === categoryActive && item[fieldKey]">&#xe610;</i>
						{{item[fieldName]}}
					</div>
					<template v-if="item[fieldKey] === categoryActive">
						<div class="side-left-item-children ellipsis" 
							v-for="(children, cIndex) in item.children" 
							:key="cIndex" 
							:class="{'childrenActive': children[childrenKey] === childrenActive}" 
							@click.stop="categoryClickChildren(children, type)"
						>
						<span v-if="children[childrenKey] === childrenActive" :style="[childrenStyle]" class="childrenStyle"></span>
						{{children[childrenName]}}</div>
					</template>
				</template>
				<template v-else>
					<div class="side-left-item-children ellipsis"
						:class="{ childrenActive : item[fieldKey] === childrenActive}" 
						@click.stop="categoryClickChildren(item, type)"
					>
					<span v-if="item[fieldKey] === childrenActive" :style="[childrenStyle]" class="childrenStyle"></span>
					{{item[fieldName]}}</div>
				</template>
			</div>
		</scroll-view>
		<slot name="list"></slot>
	</div>
</template>

<script>
	/**
	 * @property {classifyData} Array 侧边栏数据
	 * @property {fieldName} String 没有children的显示关键字  默认name
	 * @property {fieldKey} String 没有children的显示选择关键字 默认id
	 * @property {childrenName} String children显示关键字 默认name
	 * @property {childrenKey} String children显示选择关键关键字 默认id
	 * @property {type} 'string' 是否有children 【first || children】
	 * @property {active} string  选中颜色
	 */
	export default {
		props: {
			classifyData: { // 侧边栏数据
				type: Array,
				default: [],
			}, 
			fieldName: { // 没有children的显示关键字
				type: String,
				default: 'name',
			},
			fieldKey: { // 没有children的显示选择关键字 
				type: String,
				default: 'id',
			},
			childrenName: { // children显示关键字
				type: String,
				default: 'name',
			},
			childrenKey: { // children显示选择关键关键字
				type: String,
				default: 'id',
			},
			type: { // 是否有children 
				type: String,
				default: 'first'
			},
			active: { // 选中颜色
				type: String,
				default: '#1890FF',
			}
		},
		data() {
			return {
				categoryActive: 0,
				classifyName: true,
				leftData: [],
				childrenActive: 0,
				foodList: [],
				scrollTop: 0,
				page: 1,
				limit: 15,
				total: 0,
				noData: true,
			}
		},
		watch: {
			classifyData(val) {
				this.leftData = JSON.parse(JSON.stringify(this.classifyData))
			},
		},
		onReady() {

		},
		computed: {
			activeColor() {
				let style = {}
				if (this.active) {
					style.background = this.active
					style.color = this.active !== '#fff' || this.active !== '#FFF' || this.active !== '#ffffff' || this.active !== '#FFFFFF' ? '#fff' : '#262626'
				}
				return style
			},
			childrenStyle() {
				let style = {}
				if (this.active) {
					style.background = this.active
				}
				return style
			}
		},
		methods: {
			categoryClickChildren(item) {
				this.childrenActive = this.type === 'children' ? item[this.childrenKey] : item[this.fieldKey] 
				this.$emit('select', this.childrenActive, this.type)
			},
			categoryClickMain(item) {
				if (this.type === 'children') {
					if (this.categoryActive === item[this.fieldKey] && item[this.fieldKey]) {
						this.leftData = this.classifyData
						this.categoryActive = 0
					} else {
						if (!item.children.length)  return
						this.categoryActive = item[this.fieldKey]
						this.leftData = [item]
						this.$emit('changeList', this.categoryActive)
					}
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.side {
		width: 100%;
		height: 100%;
		display: flex;
		overflow: hidden;
	}
	.side-left {
		width: 190rpx;
		height: 100%;
		background: #E7F3FF;
		flex-shrink: 0;
	}
	.side-left-item {
		height: 88rpx;
		border-bottom: solid 1rpx transparent;
		font-size: 30rpx;
	}
	.side-left-item-children {
		position: relative;
		width: 100%;
		height: 100%;
		line-height: 88rpx;
		text-align: center;
		flex-shrink: 0;
		padding: 0 12rpx ;
		box-sizing: border-box;
		.next {
			position: absolute;
			left: 4rpx;
		}
	}
	.childrenActive{
		background: #F4F6F5;
	}
	.childrenStyle {
		position: absolute;
		left: 0;
		top: 0;
		content: '';
		display: block;
		width: 8rpx;
		height: 88rpx;
	}
	.active {
		color: #fff;
		background: #1890FF;
	}
	::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
	 width: 0;
	 height: 0;
	 color: transparent;
	}
</style>

调用（solt = “list” 菜品数据）

classifyData 侧边栏数据

fieldKey 数组对象item key值

type 二级侧边栏 children 一级侧边栏 first

childrenKey 二级侧边栏children key

@select 点击最底层事件 return（item，type）

@changeList 点击二级侧边栏事件 return（item）

					<SideBar :classifyData="supplierData" fieldName="supplier_name" fieldKey="supplier_id" @select="changeSelect" >
						<div slot="list" class="slot-warp">
							<scroll-view class="side-right" scroll-y lower-threshold="100" @scrolltolower="scrollBottom" :scroll-top="scrollTop" scroll-with-animation>
								<template v-if="lists.length">
									<div v-for="(foods,index) in lists" :key="index" class="side-right-item" @click.stop="handleList(foods, index)">
										<div class="title db-ellopsis">{{foods.name}}</div>
										<div class="sub-title db-ellopsis">二级提示</div>
										<div class="status">
											<icon v-if="foods.status" class="icon-select" type="success" size="24" color="#1890FF"></icon>
											<icon v-else class="icon-radio" type="circle" size="24"></icon>
										</div>
									</div>
									<div class="no-data" v-if="noData">
										<LineTip text="到底了"></LineTip>
									</div>
								</template>
								<template v-else>
									<Empty text="暂无数据" :imgWidth="220" :imgHeight="222"></Empty>
								</template>
							</scroll-view>
						</div>
					</SideBar>

二级侧边栏（一级侧边栏有children）

二级侧边栏（点击进去可返回）

一级侧边栏