125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
<template>
|
|
<view class="cont">
|
|
<div class="tab" @tap.stop="changeTabbar(0)">
|
|
<image src="@/static/tabbar/home.png" mode="aspectFit" v-show="indexs!=0"></image>
|
|
<image src="@/static/tabbar/home-active.png" mode="aspectFit" v-show="indexs==0"></image>
|
|
<div class="txt" :class="indexs==0?'act1':''">设备</div>
|
|
</div>
|
|
<div class="tab" @tap.stop="changeTabbar(1)">
|
|
<image src="@/static/tabbar/tj.png" mode="aspectFit" v-show="indexs!=1" style="width: 36rpx;height: 36rpx;"></image>
|
|
<image src="@/static/tabbar/tj-active.png" mode="aspectFit" v-show="indexs==1" style="width: 36rpx;height: 36rpx;"></image>
|
|
<div class="txt" :class="indexs==1?'act1':''">统计</div>
|
|
</div>
|
|
<div class="tab" @tap.stop="changeTabbar(2)">
|
|
<image src="@/static/tabbar/my.png" mode="aspectFit" v-show="indexs!=2" style="width: 28rpx;height: 36.4rpx;"></image>
|
|
<image src="@/static/tabbar/my-active.png" mode="aspectFit" v-show="indexs==2" style="width: 28rpx;height: 36.4rpx;"></image>
|
|
<div class="txt" :class="indexs==2?'act1':''">商户</div>
|
|
</div>
|
|
<!-- <view class="" style="width: 50rpx;height: 50rpx;border-radius: 50%;background-color: #000;position: fixed;">
|
|
|
|
</view>
|
|
-->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
indexs: [Number, String], //题目id
|
|
},
|
|
data() {
|
|
return {
|
|
currentTabbarIndex: 0,
|
|
|
|
// 自定义底栏对应页面的加载情况
|
|
tabberPageLoadFlag: [],
|
|
ispop: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.currentTabbarIndex = this.indexs
|
|
|
|
},
|
|
methods:{
|
|
changeTabbar(index) {
|
|
|
|
if (this.currentTabbarIndex === index) return
|
|
// this._switchTabbarPage(index)
|
|
|
|
if(index==0){
|
|
uni.switchTab({
|
|
url:'/pages/index/index',
|
|
routeType: 'wx://modal',
|
|
success() {
|
|
this.currentTabbarIndex = index
|
|
}
|
|
})
|
|
console.log('点击了',index);
|
|
}else if(index==1){
|
|
uni.switchTab({
|
|
url:'/pages/tj',
|
|
routeType: 'wx://modal',
|
|
success() {
|
|
this.currentTabbarIndex = index
|
|
}
|
|
})
|
|
}else if(index==2){
|
|
uni.switchTab({
|
|
url:'/pages/my',
|
|
routeType: 'wx://modal',
|
|
success() {
|
|
this.currentTabbarIndex = index
|
|
}
|
|
})
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
/deep/.u-tabbar__content__item__button {
|
|
top: 20rpx !important;
|
|
}
|
|
|
|
/deep/.u-tabbar {
|
|
.u-tabbar__content__item:nth-child(2) {
|
|
.u-tabbar__content__item__button {
|
|
width: 32rpx !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cont {
|
|
position: fixed;
|
|
left: 60rpx;
|
|
bottom: 58rpx;
|
|
width: 632rpx;
|
|
height: 128rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
|
|
border-radius: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.tab{
|
|
width: 44rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
.txt{
|
|
margin-top: 10rpx;
|
|
font-size: 20rpx;
|
|
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
|
font-weight: 400;
|
|
color: #95989D;
|
|
}
|
|
.act1{
|
|
color: #8883F0;
|
|
}
|
|
}
|
|
}
|
|
</style> |