html
<template>
<view class="container">
<view class="department_container d-flex f-direction">
<view class="tab_wrapper">
<view class="tab_content">
<scroll-view scroll-x="true" :scroll-left="scrollLeft" @scroll="handleScroll">
<view class="ul">
<view class="li d-flex a-center f-32 color-9" id="title" >
<view id="choTxt" v-if="curItem == null">请选择</view>
<view id="choTxt" v-else @click="handleDepartmentHomepage">
首页
<uni-icons type="right" color="#999" v-if="curItem.title != item.title"></uni-icons>
</view>
<view id="choTxt" v-for="(item,index) in chooseArr" :key="index" @click="handleTitle(item,index)">
<text :class="curItem.title == item.title ? 'color-02' : 'color-9'">{{item.title}}</text>
<uni-icons type="right" color="#999" v-if="curItem.title != item.title"></uni-icons>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="department_list safeArea">
<scroll-view scroll-y="true">
<view class="ul">
<view class="li" v-for="(item,index) in list" :key="index">
<uni-row>
<uni-col :span="18">
<view class="f-32 color-3" @click="handleSelect(item)">{{item.title}}</view>
</uni-col>
<uni-col :span="6" v-if="item.children && item.children.length != 0">
<view class="subordinate f-28 color-02" @click="handleNext(item, index)">
下级
<uni-icons type="right" color="#02C2B0"></uni-icons>
</view>
</uni-col>
</uni-row>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
js
<script>
export default {
data() {
return {
scrollLeft: 0, // 横向滚动条的位置
titleWidth: 0, // tab每个li的宽度
chooseArr: [], // 选中的进入下一级
curItem: null, // 当前选中的
selectArr: [], // 选中的
list: [
{id: '0', title: '一级', children: [
{id: '00', title: '十一级', children: [
{id: '001', title: '101某某部门', children: [
{id: '0001', title: '1001某某部门', children: [
{id: '00001', title: '10001某某部门', children: [
{id: '000001', title: '000001某某部门'},
{id: '000002', title: '000002某某部门'},
{id: '000003', title: '000003某某部门'},
{id: '000004', title: '000004某某部门'},
{id: '000005', title: '000005某某部门'}
]},
{id: '00002', title: '10002某某部门'},
{id: '00003', title: '10003某某部门'},
{id: '00004', title: '10004某某部门'},
{id: '00005', title: '10005某某部门'}
]},
{id: '0002', title: '1002某某部门'},
{id: '0003', title: '1003某某部门'},
{id: '0004', title: '1004某某部门'},
{id: '0005', title: '1005某某部门'}
]},
{id: '001', title: '102某某部门'},
{id: '001', title: '103某某部门'},
{id: '001', title: '104某某部门'},
{id: '001', title: '105某某部门'}
]},
{id: '01', title: '十二级',children: [
{id: '001', title: '121级'},
{id: '001', title: '122级'},
{id: '001', title: '123级'},
{id: '001', title: '124级'},
{id: '001', title: '125级'}
]},
{id: '02', title: '十三级'},
{id: '03', title: '十四级'},
{id: '03', title: '十五级'}
]},
{id: '1', title: '二级', children: [
{id: '10', title: '二一级'},
{id: '11', title: '二二级'},
{id: '12', title: '二三级'},
{id: '13', title: '二四级'},
{id: '13', title: '二五级'}
]},
{id: '2', title: '三级'},
{id: '3', title: '四级'},
{id: '4', title: '五级'},
{id: '5', title: '六级'},
{id: '6', title: '七级'},
{id: '7', title: '八级'},
{id: '8', title: '九级'},
{id: '9', title: '十级'},
{id: '10', title: '十一级'},
{id: '11', title: '十二级'},
{id: '12', title: '十三级'},
{id: '13', title: '十四级'},
{id: '14', title: '十五级'},
],
}
},
onLoad() {
},
mounted() {
let that = this
const query = uni.createSelectorQuery().in(this);
query.select('#title').boundingClientRect(data => {
that.titleWidth = data.width
}).exec();
},
methods: {
// 部门的首级
handleDepartmentHomepage(){
this.chooseArr = [] // 选中的进入下一级
this.curItem = null // 当前选中的
this.selectArr = []
this.list = [
{id: '0', title: '一级', children: [
{id: '00', title: '十一级', children: [
{id: '001', title: '101某某部门', children: [
{id: '0001', title: '1001某某部门', children: [
{id: '00001', title: '10001某某部门', children: [
{id: '000001', title: '000001某某部门'},
{id: '000002', title: '000002某某部门'},
{id: '000003', title: '000003某某部门'},
{id: '000004', title: '000004某某部门'},
{id: '000005', title: '000005某某部门'}
]},
{id: '00002', title: '10002某某部门'},
{id: '00003', title: '10003某某部门'},
{id: '00004', title: '10004某某部门'},
{id: '00005', title: '10005某某部门'}
]},
{id: '0002', title: '1002某某部门'},
{id: '0003', title: '1003某某部门'},
{id: '0004', title: '1004某某部门'},
{id: '0005', title: '1005某某部门'}
]},
{id: '001', title: '102某某部门'},
{id: '001', title: '103某某部门'},
{id: '001', title: '104某某部门'},
{id: '001', title: '105某某部门'}
]},
{id: '01', title: '十二级',children: [
{id: '001', title: '121级'},
{id: '001', title: '122级'},
{id: '001', title: '123级'},
{id: '001', title: '124级'},
{id: '001', title: '125级'}
]},
{id: '02', title: '十三级'},
{id: '03', title: '十四级'},
{id: '03', title: '十五级'}
]},
{id: '1', title: '二级', children: [
{id: '10', title: '二一级'},
{id: '11', title: '二二级'},
{id: '12', title: '二三级'},
{id: '13', title: '二四级'},
{id: '13', title: '二五级'}
]},
{id: '2', title: '三级'},
{id: '3', title: '四级'},
{id: '4', title: '五级'},
{id: '5', title: '六级'},
{id: '6', title: '七级'},
{id: '7', title: '八级'},
{id: '8', title: '九级'},
{id: '9', title: '十级'},
{id: '10', title: '十一级'},
{id: '11', title: '十二级'},
{id: '12', title: '十三级'},
{id: '13', title: '十四级'},
{id: '14', title: '十五级'},
]
},
// 选中
handleSelect(val){
this.selectArr.push(...this.chooseArr,val)
},
// 进入下一级
handleNext(val){
this.curItem = val
this.chooseArr.push(val)
//获取选择终层后滚动条的走向
let that = this
const query = uni.createSelectorQuery().in(this);
query.selectAll('#choTxt').boundingClientRect(data => {
let left = that.titleWidth - data[data.length - 1].left + 68
that.scrollLeft = left
}).exec();
this.list = val.children
},
// 横向滚动
handleScroll(e){
this.scrollLeft = e.detail.scrollLeft
},
// 返回上一级
handleTitle(val,idx){
if (this.curItem.title != val.title) {
this.curItem = val
let arr = this.chooseArr // 截取前的数据
let sliceArr = []; // 截取后的数据
sliceArr = arr.slice(0,idx+1)
this.chooseArr = sliceArr
this.list = val.children
}
},
}
}
</script>
css
<style lang="less" scoped>
.department_container{
background-color: #F0F5FA;
.tab_wrapper{
height: 91rpx;
padding: 0 32rpx;
overflow: hidden;
margin-bottom: 20rpx;
scroll-view{
width: 100%;
}
.tab_content{
width: 100%;
height: 90%;
border-bottom: 1px solid #DDDDDD;
}
.ul{
height: 100%;
flex-wrap: nowrap;
.li{
height: 100%;
line-height: 91rpx;
white-space: nowrap;
}
}
}
.department_list{
flex: 1;
box-sizing: border-box;
overflow-y: hidden;
scroll-view{
height: 100%;
}
.ul{
padding-left: 32rpx;
padding-right: 32rpx;
background-color: #fff;
}
.li{
height: 96rpx;
line-height: 96rpx;
border-bottom: 1px solid #DFE0EB;
.subordinate{
text-align: right;
}
&:last-child{
border-bottom: 0px solid #DFE0EB;
}
}
}
}
</style>
