You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
4 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<u-tabbar
|
||
|
|
class="tabBar"
|
||
|
|
:value="current?current:0"
|
||
|
|
@change="changeTab"
|
||
|
|
fixed="true"
|
||
|
|
safeAreaInsetBottom="true"
|
||
|
|
active-color="#4D5566"
|
||
|
|
inactive-color="#848FA5"
|
||
|
|
>
|
||
|
|
<u-tabbar-item v-for="(item,index) in list" :key="index" :text="item.text">
|
||
|
|
<image class="tabBarBtn" :src="item.iconPath" slot="inactive-icon"></image>
|
||
|
|
<image class="tabBarBtn" :src="item.selectedIconPath" slot="active-icon"></image>
|
||
|
|
</u-tabbar-item>
|
||
|
|
</u-tabbar>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:"TabBar",
|
||
|
|
props:{
|
||
|
|
current:Number
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
list:[{
|
||
|
|
iconPath:"/static/img/home.png",
|
||
|
|
selectedIconPath:"/static/img/homeHL.png",
|
||
|
|
pagePath:"pages/cloudStore/cloudStoreList",
|
||
|
|
text:"主页",
|
||
|
|
customIcon:false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
iconPath:"/static/img/user.png",
|
||
|
|
selectedIconPath:"/static/img/userHL.png",
|
||
|
|
pagePath:"pages/index/index",
|
||
|
|
text:'我的',
|
||
|
|
customIcon:false
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
//页面跳转
|
||
|
|
changeTab(e){
|
||
|
|
//console.log(e)
|
||
|
|
uni.switchTab({
|
||
|
|
url:'/'+this.list[e].pagePath
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.tabBar{
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #0066D6;
|
||
|
|
}
|
||
|
|
.tabBarBtn{
|
||
|
|
width: 36rpx;
|
||
|
|
height: 39rpx;
|
||
|
|
}
|
||
|
|
</style>
|