88 lines
2.1 KiB
Vue
88 lines
2.1 KiB
Vue
<template>
|
|
<view class="custom-tabbar fix flex-center" :class="[{'fill-base b-1px-t':configInfo.tabBar[1].name}]">
|
|
<block v-if="configInfo.tabBar[1].name">
|
|
<view @tap.stop="changeTab(index)" class="flex-center flex-column mt-sm"
|
|
:style="{width: 100/configInfo.tabBar.length + '%'}" v-for="(item,index) in configInfo.tabBar"
|
|
:key="index">
|
|
<image mode="aspectFill" lazy-load class="cover"
|
|
:src="cur == index ? item.selected_img : item.default_img"></image>
|
|
<view class="text" :style="{color:cur == index ? primaryColor : '#666'}">{{item.name}}</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from "vuex"
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
cur: {
|
|
type: String,
|
|
default () {
|
|
return '0'
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
configInfo: state => state.config.configInfo,
|
|
commonOptions: state => state.user.commonOptions,
|
|
}),
|
|
created() {
|
|
let that = this;
|
|
let sysheight = uni.getSystemInfoSync().windowHeight
|
|
let configInfo = JSON.parse(JSON.stringify(this.configInfo))
|
|
let {
|
|
navBarHeight
|
|
} = configInfo
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.custom-tabbar').boundingClientRect(data => {
|
|
let curSysHeight = sysheight - data.height - navBarHeight
|
|
configInfo.curSysHeight = curSysHeight
|
|
configInfo.tabbarHeight = data.height
|
|
this.updateConfigItem({
|
|
key: 'configInfo',
|
|
val: configInfo
|
|
})
|
|
}).exec();
|
|
},
|
|
methods: {
|
|
...mapMutations(['updateConfigItem']),
|
|
// 点击跳转
|
|
changeTab(index) {
|
|
this.$emit('change',
|
|
index
|
|
);
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.custom-tabbar {
|
|
height: 98rpx;
|
|
bottom: 0;
|
|
height: calc(98rpx + env(safe-area-inset-bottom) / 2);
|
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
|
|
|
.cover {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 22rpx;
|
|
margin-top: 5rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
</style>
|