赞
踩
首先先在pages.josn中把需要tabBar设置好:只需要将页面路径放进去就可以
"tabBar": { "selectedColor":"#79D5AD", "color": "#999999", "backgroundColor":"#ffffff", "borderStyle": "white", "height":"0px", "list": [{ "pagePath":"pages/activity/activity", "text": " " },{ "pagePath":"pages/recommendation/recommendation", "text": " " },{ "pagePath":"pages/message/message", "text": " " },{ "pagePath":"pages/user/user", "text": " " }] }
下面就是tabBar组件:这样就可以使用uni.switchTab({})路由切换tabBar页面,:style="{‘padding-bottom’: paddingBottomHeight + ‘rpx’}"是给iphone X以上的手机tabBar适配了一个padding-bottom;
<template> <cover-view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"> <cover-view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)" > <block v-if="index == 2"> <cover-image class="item-img item-img2" :src="item.icon_a" v-if="current == index"></cover-image> <cover-image class="item-img item-img2" :src="item.icon" v-else></cover-image> </block> <block v-else> <cover-image class="item-img" :src="item.icon_a" v-if="current == index"></cover-image> <cover-image class="item-img" :src="item.icon" v-else></cover-image> </block> <cover-view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</cover-view> </cover-view> </cover-view> </template> <script> export default { props: { current: String }, data() { return { paddingBottomHeight: 0, //苹果X以上手机底部适配高度 list: [{ text: '首页', icon: '/static/foot-1-d.png', //未选中图标 icon_a: '/static/foot-1-a.png', //选中图片 path: "/pages/index/index", //页面路 },{ text: '社区', icon: '/static/foot-2-d.png', icon_a: '/static/foot-2-a.png', path: "/pages/community/index", } ,{ text: '', icon: '/static/foot-3.png', icon_a: '/static/foot-3.png', path: '/pages/publish/index', },{ text: '聊生意', icon: '/static/foot-4-d.png', icon_a: '/static/foot-4-a.png', path: "/pages/consult/index", },{ text: '我的', icon: '/static/foot-5-d.png', icon_a: '/static/foot-5-a.png', path: "/pages/my/index", }, ] }; }, 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; } }) } }); }, watch: { }, methods: { tabbarChange(path) { // this.$pageTo.toTab(path); uni.switchTab({ url: path }) } } }; </script> <style lang="scss" scoped> .tabbarActive{ color: #79D5AD !important; } .tabbar{ position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 100rpx; background-color: #ffffff; display: flex; justify-content: space-around; align-items: center; .tabbar-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100rpx; .item-img{ width: 46rpx; height: 46rpx; margin-bottom: 4rpx; } .item-img2{ width: 66rpx; height: 66rpx; } .item-name{ font-size: 26rpx; color: #A3A3A3; } } } </style>
下面使用tabBar页面引入自定义tabBar组件:记得加上uni.hideTabBar({})把官方tabBar隐藏
<template> <view> <view-tabbar :current="0"></view-tabbar> </view> </template> <script> import Tabbar from '@/components/tabbar.vue' export default { components: { 'view-tabbar': Tabbar }, onShow() { uni.hideTabBar({ animation: false }) }, } </script>
作者:xxxxxxxikaI
链接:https://www.jianshu.com/p/491d9ceac9e8
来源:简书
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。