<template>
<view class="cbcd">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
<view v-for="(item,index) in tabbar" :key="index" :class="[current==index ? 'u-tab-item-active' : 'u-tab-item']"
:data-current="index" @tap.stop="swichMenu(index)">
<text>{{item.name}}</text>
</view>
</scroll-view>
<block v-for="(item,index) in tabbar" :key="index">
<scroll-view scroll-y v-if="current==index">
<view>
<view>
<view>
<text>{{item.name}}</text>
</view>
<view>
<view v-for="(item1, index1) in item.foods" :key="index1">
<image :src="item1.icon" mode=""></image>
<view>{{item1.name}}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</block>
</view>
</template>
<script>
export default {
data() {
return {
tabbar: [{
name: "人员详情",
foods: [{
name: ".net",
icon: "https://img.tnblog.net/bigclassimg/1net.png"
},
{
name: "java",
icon: "https://img.tnblog.net/bigclassimg/2CORE.png"
},
{
name: "python",
icon: "https://img.tnblog.net/bigclassimg/2CORE.png"
}
]
},
{
name: "位置监控",
foods: [{
name: ".net",
icon: "https://img.tnblog.net/bigclassimg/1net.png"
},
{
name: "java",
icon: "https://img.tnblog.net/bigclassimg/python.png"
}
]
},
{
name: "健康监控",
foods: [{
name: ".net",
icon: "https://img.tnblog.net/bigclassimg/1net.png"
},
{
name: "java",
icon: "https://img.tnblog.net/bigclassimg/mobile.png"
}
]
},
{
name: "视频监控",
foods: [{
name: ".net",
icon: "https://img.tnblog.net/bigclassimg/1net.png"
},
{
name: "java",
icon: "https://img.tnblog.net/bigclassimg/2CORE.png"
}
]
},
{
name: "就医记录",
foods: [{
name: ".net",
icon: "https://img.tnblog.net/bigclassimg/1net.png"
},
{
name: "java",
icon: "https://img.tnblog.net/bigclassimg/python.png"
}
]
},
{
name: "报警信息",
foods: [{
name: ".net",
icon: "https://img.tnblog.net/bigclassimg/1net.png"
},
{
name: "java",
icon: "https://img.tnblog.net/bigclassimg/mobile.png"
}
]
},
{
name: "周期报告",
foods: [{
name: ".net",
icon: "https://img.tnblog.net/bigclassimg/1net.png"
},
{
name: "java",
icon: "https://img.tnblog.net/bigclassimg/2CORE.png"
}
]
}
],
scrollTop: 0, //tab标题的滚动条位置
current: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
}
},
methods: {
// 点击左边的栏目切换
async swichMenu(index) {
if (index == this.current) return;
this.current = index;
// 如果为0，意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({
size: true
}, res => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
this.getElRect(elClass);
}, 10);
return;
}
this[dataVal] = res.height;
}).exec();
})
}
}
}
</script>
<style scoped>
.cbcd{
display: flex;
}
.u-wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;
}
.u-search-box {
padding: 18rpx 30rpx;
}
.u-menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
}
.u-search-inner {
background-color: rgb(234, 234, 234);
border-radius: 100rpx;
display: flex;
align-items: center;
padding: 10rpx 16rpx;
}
.u-search-text {
font-size: 26rpx;
// color: $u-tips-color;
color: #909399;
margin-left: 10rpx;
}
.u-tab-view {
width: 250rpx;
height: 100%;
}
.u-tab-item {
height: 110rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #444;
font-weight: 400;
line-height: 1;
}
.u-tab-item-active {
position: relative;
color: #000;
font-size: 30rpx;
font-weight: 600;
height: 110rpx;
background: #fff;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
line-height: 1;
}
/*
.u-tab-item-active::before {
content: "";
position: absolute;
// border-left: 4px solid $u-type-primary;
height: 32rpx;
left: 0;
top: 39rpx;
} */
.u-tab-view {
height: 100%;
}
.right-box {
background-color: rgb(250, 250, 250);
}
.page-view {
padding: 16rpx;
}
.class-item {
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}
.item-title {
font-size: 26rpx;
// color: $u-main-color;
color: #303133;
font-weight: bold;
}
.item-menu-name {
font-weight: normal;
font-size: 24rpx;
color: #303133;
// color: $u-main-color;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 33.333333%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
}
</style>