微信小程序默认的tabbar不是很好看，我们可以自自定义底部导航，自定义样式，以下是个uniapp案例demo，供大家参考和使用：
一、创建components组件
tabbar.vue
二、编写底部导航
<template>
<!-- 底部导航 -->
<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
<view class="column-me row-center tabbarActive" v-if="current == item.id">
<view :class="{'cenImgbox' : item.center == 1}">
<image class="item-img" :src="item.iconPath" :class="{'cenImg cenImg_h' : item.center == 1}"></image>
</view>
<view class="text-item-x">{{item.text}}</view>
</view>
<view class="column-me row-center" v-else>
<view :class="{'cenImgbox' : item.center == 1}">
<image class="item-img1" :src="item.icon" :class="{'cenImg' : item.center == 1}"></image>
</view>
<view class="text-item-n">{{item.text}}</view>
</view>
</view>
</view>
</template>三、js代码：处理和遍历底部导航
<script>
export default {
props: {
current: String
},
data() {
return {
paddingBottomHeight: 0, //苹果X以上手机底部适配高度
list:[],
// list: [{
// text: '首页',
// icon: '../static/home.png', //未选中图标
// iconPath: '../static/home_h.png', //选中图片
// path: "/pages/index/index", //页面路径
// },
// {
// text: '水印',
// icon: '../static/water.png', //未选中图标
// iconPath: '../static/water_h.png', //选中图片
// path: "/pages/water/water", //页面路径
// },
// {
// text: '头像',
// icon: '../static/touxiang.png', //未选中图标
// iconPath: '../static/touxiang_h.png', //选中图片
// path: "/pages/touxiang/touxiang", //页面路径
// },
// {
// text: '消息',
// icon: '../static/box.png', //未选中图标
// iconPath: '../static/box_h.png', //选中图片
// path: "/pages/box/box", //页面路径
// },
// {
// text: '我的',
// icon: '../static/user.png', //未选中图标
// iconPath: '../static/user_h.png', //选中图片
// path: "/pages/user/user", //页面路径
// }
// ]
};
},
async created() {
let that = this;
uni.getSystemInfo({
success: function(res) {
let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
model.forEach(item => {
//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
that.paddingBottomHeight = 40;
}
})
}
});
uni.showLoading({
title: '加载中'
});
const result = await this.$myRequest({
url: '/Blog/getTabbar',
})
if(result.data.code==200){
this.list = result.data.data
uni.hideLoading()
// console.log(result.data.data);
}
},
watch: {
},
methods: {
tabbarChange(path) {
uni.switchTab({
url: path
})
// console.log(path, 'pathpath')
// this.$.open_tab(path)
}
}
};
</script>四、样式代码：
<style scoped>
.tabbarActive {
color: #31a3fb !important;
transform: scale(1.1);
}
.tabbar {
position: fixed;
bottom: 0rpx;
left: 0rpx;
right: 0rpx;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100rpx;
background: rgba(255,255,255,.9) ;
z-index: 999;
box-shadow: 15rpx 5rpx 5rpx 1rpx rgba(0, 0, 0, 0.5);
}
.tabbar-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100rpx;
width: 100%;
font-size: 20rpx;
transition: transform 0.3s;
}
.column-me {
display: flex;
flex-direction: column;
}
.row-center {
align-items: center;
}
.text-item-x {
color: #215AA0;
}
.text-item-n {
color: #6D7984;
}
/* 选中后 */
.item-img {
width: 50rpx;
height: 50rpx;
}
/* 选中前 */
.item-img1 {
width: 50rpx;
height: 50rpx;
}
/* 中间图片高度 */
.cenImgbox {
width: 98rpx !important;
height: 98rpx !important;
margin-top: -34rpx;
border-radius: 50%;
/* background: #000; */
background: rgba(255,255,255,.9) ;
}
/* 中间图片高度 */
.cenImg {
width: 68rpx !important;
height: 68rpx !important;
display: block;
margin: 15rpx auto;
border-radius: 50%;
background-color: #aaaaaa;
}
.cenImg_h{
background-color: #31a3fb;
}
</style>五、使用方法：在每个页面引入如下导航代码
<template> <!--index.wxml--> <view class="container"> <!-- :current="'0'" 第一个选中 --> <Tabbar :current="'1'"></Tabbar> </view> </template>
5.1、在onShow方法里面加入隐藏默认导航
onShow(){
uni.hideTabBar({
animation:false
})
}5.2、在pages.json文件里面开启自定义导航设置
"tabBar": {
"custom": true,
}6、案例效果：以上就是自定义tabbar导航案例，效果展示可以预览官方小程序
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）