You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.0 KiB
Vue
130 lines
3.0 KiB
Vue
4 months ago
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
|
||
|
|
<Realtime ref="realtime"></Realtime>
|
||
|
|
</view>
|
||
|
|
<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
|
||
|
|
<DeviceStatus ref="devicestatus"></DeviceStatus>
|
||
|
|
</view>
|
||
|
|
<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
|
||
|
|
<MyPage ref="mypage"></MyPage>
|
||
|
|
</view>
|
||
|
|
<u-tabbar v-model="currentIndex" @change="switchTabbar" :fixed="true" :placeholder="true"
|
||
|
|
:safeAreaInsetBottom="true">
|
||
|
|
<u-tabbar-item text="实时监测" icon="play-right"></u-tabbar-item>
|
||
|
|
<u-tabbar-item text="设备状态" icon="grid"></u-tabbar-item>
|
||
|
|
<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
|
||
|
|
</u-tabbar>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Realtime from '../realtime/realtime.vue'
|
||
|
|
import DeviceStatus from '../device-status/device-status.vue'
|
||
|
|
import MyPage from '../my/my.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Realtime,
|
||
|
|
DeviceStatus,
|
||
|
|
MyPage
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
value6: 0,
|
||
|
|
// tabbar当前被选中的序号
|
||
|
|
currentIndex: 0,
|
||
|
|
// 自定义底栏对应页面的加载情况
|
||
|
|
tabberPageLoadFlag: [],
|
||
|
|
// 底部tabbar菜单数据
|
||
|
|
tabbarList: [{
|
||
|
|
title: '元素',
|
||
|
|
activeIcon: 'count-fill',
|
||
|
|
inactiveIcon: 'menu'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '组件',
|
||
|
|
activeIcon: 'honor-fill',
|
||
|
|
inactiveIcon: 'honor'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '会员',
|
||
|
|
activeIcon: 'vip-fill',
|
||
|
|
inactiveIcon: 'vip',
|
||
|
|
activeIconColor: '#FFFFFF',
|
||
|
|
inactiveIconColor: '#FFFFFF',
|
||
|
|
iconSize: 50,
|
||
|
|
out: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '发现',
|
||
|
|
activeIcon: 'discover-fill',
|
||
|
|
inactiveIcon: 'discover',
|
||
|
|
count: 100
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '图鸟',
|
||
|
|
activeIcon: 'computer-fill',
|
||
|
|
inactiveIcon: 'computer',
|
||
|
|
dot: true
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
const index = Number(options.index || 0)
|
||
|
|
// 根据底部tabbar菜单列表设置对应页面的加载情况
|
||
|
|
this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
|
||
|
|
return index === tabbar_index
|
||
|
|
})
|
||
|
|
this.switchTabbar(index)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 导航页面滚动到底部
|
||
|
|
tabbarPageScrollLower(e) {},
|
||
|
|
// 切换导航
|
||
|
|
switchTabbar(index) {
|
||
|
|
this._switchTabbarPage(index)
|
||
|
|
},
|
||
|
|
// 切换导航页面
|
||
|
|
_switchTabbarPage(index) {
|
||
|
|
const selectPageFlag = this.tabberPageLoadFlag[index]
|
||
|
|
if (selectPageFlag === undefined) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (selectPageFlag === false) {
|
||
|
|
this.tabberPageLoadFlag[index] = true
|
||
|
|
}
|
||
|
|
this.currentIndex = index
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
height: 200rpx;
|
||
|
|
width: 200rpx;
|
||
|
|
margin-top: 200rpx;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-bottom: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-area {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #8f8f94;
|
||
|
|
}
|
||
|
|
</style>
|