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.
339 lines
7.3 KiB
339 lines
7.3 KiB
<template>
|
|
|
|
<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="transShow">
|
|
<view :class="displaytype==1?'tab-bar_1':'tab-bar_2'">
|
|
<block v-if="displaytype==1">
|
|
<view v-if="currenttype=='1'" @click="jump(1)" class="tab-bar-item_1 ">
|
|
<img src="../static/tabbar/home-a.png" class="icon_1" />
|
|
<text lines="1" class="text_7">首页</text>
|
|
</view>
|
|
<view v-else class="tab-bar-item_1" @click="jump(1)">
|
|
<img src="../static/tabbar/home.png" class="icon_1" />
|
|
<text lines="1" class="text_8">首页</text>
|
|
</view>
|
|
|
|
|
|
|
|
<view v-if="currenttype=='2'" @click="jump(2)" class="tab-bar-item_2">
|
|
<img src="../static/tabbar/yingyong-a.png" class="icon_2" />
|
|
<text lines="1" class="text_7">应用</text>
|
|
</view>
|
|
<view v-else @click="jump(2)" class="tab-bar-item_2">
|
|
<img src="../static/tabbar/yingyong.png" class="icon_2" />
|
|
<text lines="1" class="text_8">应用</text>
|
|
</view>
|
|
|
|
|
|
<view v-if="currenttype=='3'" @click="jump(3)" class="tab-bar-item_3">
|
|
<img src="../static/tabbar/learn-a.png" class="icon_3" />
|
|
<text lines="1" class="text_7">学习</text>
|
|
</view>
|
|
<view v-else @click="jump(3)" class="tab-bar-item_3">
|
|
<img src="../static/tabbar/learn.png" class="icon_3" />
|
|
<text lines="1" class="text_8">学习</text>
|
|
</view>
|
|
|
|
|
|
<view v-if="currenttype=='4'" @click="jump(4)" class="tab-bar-item_4">
|
|
<img src="../static/tabbar/user-a.png" class="icon_4" />
|
|
<text lines="1" class="text_7">我的</text>
|
|
</view>
|
|
<view v-else @click="jump(4)" class="tab-bar-item_4">
|
|
<img src="../static/tabbar/user.png" class="icon_4" />
|
|
<text lines="1" class="text_8">我的</text>
|
|
</view>
|
|
</block>
|
|
<block v-if="displaytype==2">
|
|
<view v-if="currenttype=='1'" @click="jump(1)" class="tab-bar-item_1">
|
|
<img src="../static/tabbar/home-a.png" class="icon_1" />
|
|
<text lines="1" class="text_7">首页</text>
|
|
</view>
|
|
<view v-else class="tab-bar-item_1" @click="jump(1)">
|
|
<img src="../static/tabbar/home-b.png" class="icon_1" />
|
|
<text lines="1" class="text_9">首页</text>
|
|
</view>
|
|
|
|
|
|
|
|
<view v-if="currenttype=='2'" @click="jump(2)" class="tab-bar-item_2">
|
|
<img src="../static/tabbar/yingyong-a.png" class="icon_2" />
|
|
<text lines="1" class="text_7">应用</text>
|
|
</view>
|
|
<view v-else @click="jump(2)" class="tab-bar-item_2">
|
|
<img src="../static/tabbar/yingyong-b.png" class="icon_2" />
|
|
<text lines="1" class="text_9">应用</text>
|
|
</view>
|
|
|
|
|
|
<view v-if="currenttype=='3'" @click="jump(3)" class="tab-bar-item_3">
|
|
<img src="../static/tabbar/learn-a.png" class="icon_3" />
|
|
<text lines="1" class="text_7">学习</text>
|
|
</view>
|
|
<view v-else @click="jump(3)" class="tab-bar-item_3">
|
|
<img src="../static/tabbar/learn-b.png" class="icon_3" />
|
|
<text lines="1" class="text_9">学习</text>
|
|
</view>
|
|
|
|
|
|
<view v-if="currenttype=='4'" @click="jump(4)" class="tab-bar-item_4">
|
|
<img src="../static/tabbar/user-a.png" class="icon_4" />
|
|
<text lines="1" class="text_7">我的</text>
|
|
</view>
|
|
<view v-else @click="jump(4)" class="tab-bar-item_4">
|
|
<img src="../static/tabbar/user-b.png" class="icon_4" />
|
|
<text lines="1" class="text_9">我的</text>
|
|
</view>
|
|
</block>
|
|
|
|
</view>
|
|
</uni-transition>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "tabbar",
|
|
props: {
|
|
currenttype: {
|
|
type: String,
|
|
default: "1"
|
|
},
|
|
displaytype: {
|
|
type: String,
|
|
default: "1"
|
|
},
|
|
transShow:{
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
modeClass: ['fade'],
|
|
maskClass: {
|
|
position: 'fixed',
|
|
bottom: 0,
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
'background-color': 'rgba(0, 0, 0, 0.4)'
|
|
},
|
|
transfromClass: {
|
|
position: 'fixed',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
display: 'flex',
|
|
'justify-content':'center',
|
|
'align-items': 'center'
|
|
},
|
|
ismoving:false
|
|
};
|
|
},
|
|
created() {
|
|
let app = this;
|
|
|
|
|
|
uni.$on('onPageScroll', function(data) {
|
|
if(!app.ismoving)
|
|
{
|
|
app.ismoving = true;
|
|
app.modeClass = ['slide-bottom'];
|
|
app.transShow =true;
|
|
|
|
setTimeout(function(){
|
|
console.log(222);
|
|
app.modeClass = ['slide-bottom'];
|
|
app.transShow = false;
|
|
app.ismoving = false;
|
|
},5000)
|
|
}
|
|
});
|
|
|
|
},
|
|
methods: {
|
|
|
|
jump(type) {
|
|
|
|
if (type == 1) {
|
|
console.log('hahhaha');
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
|
|
if (type == 2) {
|
|
this.$navTo('pages/yingyong/yingyong')
|
|
}
|
|
|
|
if (type == 3) {
|
|
this.$navTo('pages/learn/learn')
|
|
}
|
|
|
|
if (type == 4) {
|
|
this.$navTo('pages/user/user')
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.tab-bar_1 {
|
|
width: 750rpx;
|
|
height: 105rpx;
|
|
background: url(../static/tabbarbg2.png) 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
flex-direction: row;
|
|
display: flex;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.tab-bar_2 {
|
|
width: 750rpx;
|
|
height: 105rpx;
|
|
background-image: unset !important;
|
|
background-color: #eee !important;
|
|
flex-direction: row;
|
|
display: flex;
|
|
position: fixed;
|
|
bottom: 0;
|
|
}
|
|
|
|
.tab-bar-item_1 {
|
|
width: 50rpx;
|
|
height: 70rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: 15rpx auto 0 81rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon_1 {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
|
|
.text_7 {
|
|
width: 50rpx;
|
|
height: 19rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(230, 0, 18, 1);
|
|
font-size: 20rpx;
|
|
font-family: FZLTKHK--GBK1-0;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: 7rpx 0 0 2rpx;
|
|
}
|
|
|
|
.tab-bar-item_2 {
|
|
width: 50rpx;
|
|
height: 70rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin: 15rpx auto 0 81rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon_2 {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.text_8 {
|
|
width: 50rpx;
|
|
height: 18rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 20rpx;
|
|
font-family: FZLTKHK--GBK1-0;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: 7rpx 0 0 2rpx;
|
|
}
|
|
|
|
.tab-bar-item_3 {
|
|
width: 50rpx;
|
|
height: 70rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin: 15rpx auto 0 81rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon_3 {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.text_9 {
|
|
width: 37rpx;
|
|
height: 18rpx;
|
|
overflow-wrap: break-word;
|
|
color: #797979;
|
|
font-size: 20rpx;
|
|
font-family: FZLTKHK--GBK1-0;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: 7rpx 0 0 2rpx;
|
|
}
|
|
|
|
.tab-bar-item_4 {
|
|
width: 50rpx;
|
|
height: 68rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin: 15rpx auto 0 81rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon_4 {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.text_10 {
|
|
width: 38rpx;
|
|
height: 18rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 20rpx;
|
|
font-family: FZLTKHK--GBK1-0;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: 6rpx 0 0 4rpx;
|
|
}
|
|
|
|
/*左侧滑出*/
|
|
.slip_in_animation {
|
|
animation: slip_in 5s;
|
|
}
|
|
|
|
|
|
|
|
/*左侧滑出*/
|
|
@keyframes slip_out {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
to {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
</style>
|
|
|