<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]"></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)
二级侧边栏(点击进去可返回)
一级侧边栏