uniapp底部菜单_uniapp⼩程序实现⾃定义底部导航栏
（tarbar）
class=".tarbar-list":
>
{{ }}
exportdefault{
components: {'release-popup': releasePopup
},
props: ['selected'],
data() {return{
tabBar: {
color:'#ccc',
selectedColor:'#E84351',
borderStyle:'#ccc',
backgroundColor:'#fff',
position:'bottom',
list: [
{
pagePath:'/pages/index/index',
iconPath:'/static/tarbar/home1.png',
selectedIconPath:'/static/tarbar/home2.png',
text:'⾸页'},
{
pagePath:'/pages/foodie/foodie',
iconPath:'/static/tarbar/foodie1.png',
selectedIconPath:'/static/tarbar/foodie2.png',
text:'吃什么'},
{
pagePath:'/pages/releaseBtn/releaseBtn',
iconPath:'',
selectedIconPath:'/static/tarbar/release.png'},
{
pagePath:'/pages/discover/discover',
iconPath:'/static/tarbar/discover1.png', selectedIconPath:'/static/tarbar/discover2.png',
text:'发现'},
{
pagePath:'/pages/personal/personal',
iconPath:'/static/tarbar/personal1.png', selectedIconPath:'/static/tarbar/personal2.png',
text:'我的'}
]
},
oldSelected:0, //记录之前访问的索引; 值为2的时候显⽰遮罩isShowMask: false};
},
onLoad() {},
methods: {
setSelected(index) {
console.log(index);if (index != 2) {
uni.switchTab({
url:this.tabBar.list[index].pagePath
});
}else{this.isShowMask = true;
}this.$forceUpdate();
},
closeMask() {this.isShowMask = false;
}
}
};
width:100%;
z-index: 9999;
position: fixed;
}
.tarbar-list {
width:100%;
height: 120upx;
background: #4d586f; position: fixed;
left:0;
bottom:0;
}
.tarbar-list-ul {
width:100%;
height:100%;
padding: 20upx 50upx; display: flex;
justify-content: space-between; box-sizing: border-box;
}
.tarbar-list-li {
width: 80upx;
height: 80upx;
}
导航菜单
.tarbar-list-li-icon {
width: 50upx;
height: 50upx;
margin:0auto;
}
.tarbar-list-li-icon image { width: 50upx;
height: 50upx;
}
.tarbar-list-li-name {
width:100%;
text-align: center;
line-height: 30upx;
font-size: 20upx;
height: 30upx;
}
.tarbar-list-li-center {
width: 100upx;
}
.tarbar-list-li-center .tarbar-list-li-icon,
.tarbar-list-li-center .tarbar-list-li-icon image { width: 90upx;
height: 60upx;
}

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