147 lines
3.0 KiB
Vue
147 lines
3.0 KiB
Vue
<template>
|
|
<view :style="{height:seatheight+'px'}"></view>
|
|
<view class="_footer">
|
|
<!-- <view class="mid"></view> -->
|
|
<view class="_tabbarsafe">
|
|
<view class="_tabbar">
|
|
<template v-for="(item,index) in tabbarArr" :key="index">
|
|
<view v-if="!item.hide" @tap="gotab(item.fullpath)" class="_bar" :class="{_active:item.fullpath == fullpath}">
|
|
<view class="_icon" :style="{backgroundImage:svg2bg(item.fullpath == fullpath?item.selecticon:item.icon)}">
|
|
</view>
|
|
<view class="_name">{{lang(item.name)}}</view>
|
|
<view v-if="item.reddot" class="_reddot"></view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view class="_footer_safe" :style="{height:footer_safe_height+'px'}"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<style scoped>
|
|
._mid {
|
|
left: calc(50% - 3em);
|
|
height: 6em;
|
|
position: absolute;
|
|
top: 0.5em;
|
|
width: 6em;
|
|
border-radius: 50%;
|
|
background: var(--bg3);
|
|
}
|
|
|
|
._footer {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
z-index: 990;
|
|
}
|
|
|
|
._tabbarsafe {
|
|
position: relative;
|
|
}
|
|
|
|
._tabbar {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin: 1em;
|
|
border-radius: 2.5em;
|
|
background: #dddddd22;
|
|
/* box-shadow: 0 0 50px 5px #ffffff; */
|
|
border: 1px solid var(--bg6);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
._tabbar ._bar {
|
|
position: relative;
|
|
text-align: center;
|
|
color: var(--txt1);
|
|
margin: 0.5em 0;
|
|
flex: 1;
|
|
}
|
|
|
|
._tabbar ._bar._active {
|
|
color: var(--txt9);
|
|
}
|
|
|
|
._tabbar ._icon {
|
|
width: 1.6em;
|
|
height: 1.6em;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
._tabbar ._name {
|
|
color: var(--txt6);
|
|
padding-top: 0.2em;
|
|
font-size: 0.9em;
|
|
text-shadow: 0 0 3px var(--bg1);
|
|
}
|
|
|
|
._tabbar ._active ._name {
|
|
font-weight: bold;
|
|
color: var(--man5);
|
|
}
|
|
|
|
._tabbar ._reddot {
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(50% + 1em);
|
|
background: var(--dag5);
|
|
border-radius: 50%;
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
}
|
|
|
|
._footer_safe {
|
|
/* background-color: #1cf11899; */
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
props: {},
|
|
data() {
|
|
return {
|
|
footer_safe_height: 0,
|
|
seatheight: 0,
|
|
fullpath: '',
|
|
tabbarArr: null
|
|
};
|
|
},
|
|
watch: {},
|
|
mounted() { //h5 wx ok
|
|
var app = getApp();
|
|
var pg = app.getpage();
|
|
if (pg.route)
|
|
this.fullpath = '/' + pg.route;
|
|
else if (pg.__route__)
|
|
this.fullpath = '/' + pg.__route__;
|
|
this.footer_safe_height = app.globalData._footer_safe_height;
|
|
if(this.tabbarArr == null)
|
|
this.loadtabbardata();
|
|
setTimeout(() => { //ios版本微信小程序存在执行顺序问题
|
|
uni.createSelectorQuery().in(this).select('._footer').boundingClientRect(data => {
|
|
if (data)
|
|
this.seatheight = data.height;
|
|
}).exec();
|
|
}, 10);
|
|
},
|
|
activated() {
|
|
this.loadtabbardata();
|
|
},
|
|
methods: {
|
|
Getheight() {
|
|
return this.seatheight;
|
|
},
|
|
loadtabbardata() {
|
|
var app = getApp();
|
|
this.tabbarArr = this.objclone(app.globalData.tabbarArr);
|
|
},
|
|
gotab(url) {
|
|
uni.switchTab({
|
|
url: url,
|
|
fail: res => {
|
|
console.warn(res.errMsg);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script> |