You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
3.4 KiB
147 lines
3.4 KiB
<template>
|
|
<view>
|
|
<view class="occupy-position"></view>
|
|
<view class="content">
|
|
<view class="tabbar-box">
|
|
<view class="tab-item"
|
|
:class="{'tab-active': currentTabBar == index}"
|
|
:style="{'width': 100 / show_count +'%'}"
|
|
@click="clickTab(item, index)"
|
|
v-if="item.show"
|
|
v-for="(item, index) in tabbars" :key="index">
|
|
<view class="tab-icon">
|
|
<text class="lf-font-40 lf-iconfont" :class="item.icon"></text>
|
|
</view>
|
|
<view class="tab-name">{{ item.text }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
props: {
|
|
type: {
|
|
type: String, // 默认跳转方式redirect，可选switch
|
|
default: 'redirect'
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
show_count: 0
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['currentTabBar', 'tabbars', 'isShowTabBar'])
|
|
},
|
|
created(){
|
|
// 组件被创建时检查当前在哪个页面，然后校验currentTabBar是否与之匹配
|
|
let pages = getCurrentPages();
|
|
let page = pages[pages.length - 1].route;
|
|
let tabbars = this.tabbars;
|
|
let tabbar_name = tabbars[this.currentTabBar].path;
|
|
let current = 0;
|
|
let show_count = 0;
|
|
tabbars.map((item, index) => {
|
|
if(item.path == '/'+ page){
|
|
current = index;
|
|
}
|
|
if(item.show){
|
|
show_count++;
|
|
}
|
|
})
|
|
this.show_count = show_count;
|
|
if(tabbar_name != '/'+ page){
|
|
this.$store.commit('setCurrentTabBar', current);
|
|
}
|
|
},
|
|
methods: {
|
|
clickTab(item, index){
|
|
if(this.currentTabBar == index) return;
|
|
this.$store.commit('setCurrentTabBar', index);
|
|
uni.vibrateShort();
|
|
this.$url(item.path, {type: this.type});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.lf-font-40{
|
|
font-size: 40rpx;
|
|
}
|
|
.occupy-position{
|
|
width: 750rpx;
|
|
height: 120rpx;
|
|
box-sizing: content-box;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.content{
|
|
width: 750rpx;
|
|
height: 120rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 60rpx 60rpx 0 0;
|
|
box-shadow: 0rpx -2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99999;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: content-box;
|
|
.tabbar-box{
|
|
width: 100%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
.tab-item{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
.tab-name{
|
|
font-size: 24rpx;
|
|
color: #777777;
|
|
}
|
|
&.tab-active{
|
|
.tab-icon{
|
|
background-color: #15716E;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// transform: translateY(-20rpx) scale(1.4);
|
|
border-radius: 50%;
|
|
color: #FFFFFF;
|
|
overflow: hidden;
|
|
animation: wobble 1s .2s ease both;
|
|
text{
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
.tab-name{
|
|
color: #15716E;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes wobble{
|
|
0%{transform:translateX(0%)}
|
|
15%{transform:translateX(-25%) rotate(-5deg)}
|
|
30%{transform:translateX(20%) rotate(3deg)}
|
|
45%{transform:translateX(-15%) rotate(-3deg)}
|
|
60%{transform:translateX(10%) rotate(2deg)}
|
|
75%{transform:translateX(-5%) rotate(-1deg)}
|
|
99%{transform:translateX(0%)}
|
|
100%{transform: translateY(-20rpx) scale(1.4);}
|
|
}
|
|
|
|
</style>
|