1.首先需要在page.json里把
"tabBar": {
"custom": true
}
在app.vue中读取机型的屏幕高度 设置一个全局变量 tbBottom
globalData: {
//全局变量
tbBottom:0,
},
onLaunch: function () {
let wxSync=wx.getSystemInfoSync();
this.globalData.tbBottom=wxSync.screenHeight-wxSync.safeArea.bottom
},
2.然后就是组件封装 props的selectIndex用来确定哪一个按钮是选中的状态
<template>
<div class="tabbar" :style="{'bottom':tbBottom+'px'}">
<ul>
<li v-for="(item, index) in pageData" :key="index" @click="goPage(item.pagePath)">
<img :src="selectIndex==index?item.selectedIconPath:item.iconPath" alt="" />
<p>{{ item.text }}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
props:['selectIndex'],
data() {
return {
tbBottom: getApp().globalData.tbBottom,
pageData: [
{
text: "首页",
pagePath:'/pages/index/index',
iconPath: "/static/home.png",
selectedIconPath:'/static/home_se.png'
},
{
text: "个人",
pagePath:'/pages/service/index',
iconPath: "/static/check.png",
selectedIconPath:'/static/check_se.png'
},
],
};
},
onLoad() {},
methods: {
goPage(pagePath){
wx.switchTab({
url:pagePath,
});
}
},
};
</script>
<style lang="scss" scoped>
.tabbar{
position: fixed;
left: 0;
bottom: 0;
z-index: 9;
width: 750rpx;
height: auto;
ul{
height: auto;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
li{
flex: 1;
height: 120rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
img{
height: 80rpx;
width: 80rpx;
}
}
}
}
</style>
如:在index.vue页面中
给selectIndex传0进去 就显示选中第一个