uni-app⾃定义底部tabBar导航适配机型1.⾸先需要在page.json⾥把
"tabBar": {
"custom": true
}
在app.vue中读取机型的屏幕⾼度设置⼀个全局变量 tbBottom
globalData: {
//全局变量
tbBottom:0,
},
onLaunch: function () {
let SystemInfoSync();
this.globalData.tbBottom=wxSync.screenHeight-wxSync.safeArea.bottom
},
然后就是组件封装 props的selectIndex⽤来确定哪⼀个按钮是选中的状态
<template>
<div class="tabbar" :>
<ul>
<li v-for="(item, index) in pageData" :key="index" @click="goPage(item.pagePath)">
<img :src="selectIndex==index?item.selectedIconPath:item.iconPath" alt="" />
<p>{{ }}</p>
</li>
</ul>
</div>selectediconpath什么意思
</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进去就显⽰选中第⼀个

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。