tabbar.vue
<template>
<view class="TabBar">
<view class="tab" v-for="(item,index) in TabBarList" :key="index" @tap="navigatorTo(item.url)">
<!-- 判断是否有点击,如果没有就不是激活样式,点击就是激活的样式 -->
<image class="imgsize" v-if="item.type == 0" :src="current == index ? item.selectIcon : item.icon" mode="widthFix"></image>
<!-- 设置一个状态值(type),判断加号是否展示 -->
<image class="addimgsize" v-if="item.type == 1" src="../../static/add.png" mode="widthFix"></image>
<view class="text">{{item.name}}</view>
</view>
</view>
</template>
<script>
export default {
props: {
current: {
type: Number,
default: 0 //默认第一个页面tabbar激活
}
},
data() {
return {
TabBarList: [{
type: 0,
icon: '../../static/home.png',
selectIcon: '../../static/home-active.png',
name: '首页',
url: '../index/index'
},
{
type: 0,
icon: '../../static/bagtab.png',
selectIcon: '../../static/bagtab-active.png',
name: '供需',
url: '../demand/demand'
},
{
type: 1,
icon: '../../static/add.png',
selectIcon: '../../static/add.png',
name: '发布供需',
url: '../edit/edit'
},
{
type: 0,
icon: '../../static/company.png',
selectIcon: '../../static/company-active.png',
name: '企业',
url: '../company/company'
},
{
type: 0,
icon: '../../static/person.png',
selectIcon: '../../static/person-active.png',
name: '我的',
url: '../personal/personal'
},
]
}
},
methods: {
navigatorTo(e) {
uni.redirectTo({
url: e,
});
}
}
}
</script>
<style scoped>
.TabBar {
position: fixed;
bottom: 0;
height: 80upx;
background-color: #fff;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab {
display: flex;
flex-direction: column;
align-items: center;
}
.imgsize {
width: 40upx;
height: 40upx;
}
.addimgsize {
width: 70upx;
height: 70upx;
margin-top: -30upx;
}
.text {
font-size: 12px;
}
</style>
需要使用到tabbar的组件里,给tabbar组件传值,设置点击时的激活样式
<template>
<view>
第二个页面
<tabbar :current="1"></tabbar>
</view>
</template>
<script>
import tabbar from '../component/tabbar.vue'
export default {
data() {
return {
}
},
components: {
tabbar
},
methods: {
}
}
</script>
<style>
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。