uni-app 底部导航栏-中间突出

相术發表於 2021-10-28 15:03:00

<img src="https://img2020.cnblogs.com/blog/2237618/202110/2237618-20211028150018110-111812939.png" alt="" loading="lazy">
 
 
在实际页面开发中，经常有中间突出的tab需求。
以一个单页面为中心的显示：https://www.cnblogs.com/lovejielive/p/14251327.html，在处理数据相对麻烦。
以组件方式来导入，就要在pages.json中配置的tabBar的每一个页面中导入该组件，当然也可以选择全局导入。
组件形式配置，页面的各项生命周期都可以正常使用，重新自定义tabBar样式也方便。
<h2 class="md-end-block md-heading md-focus">pages.json配置</h2>
创建所需的导航页面，在tabBar中配置好.
在使用中只需要配置list与里面的pagePath为页面路径
<div class="cnblogs_code">
<pre> "tabBar": {
 "color": "#cbcbcb",
 "selectedColor": "#f5cb2b",
 "borderStyle": "black",
 "backgroundColor": "#FFFFFF",
 "list": [{
 "pagePath": "pages/index/index"
 }, {
 "pagePath": "pages/look/look"
 }, {
 "pagePath": "pages/enter/enter"
 }, {
 "pagePath": "pages/my/my"
 }, {
 "pagePath": "pages/enter/enterInfo"
 }]
}</pre>
</div>
<h2 class="md-end-block md-heading md-focus">创建tabBar组件</h2>
在components文件夹下创建 tabbar文件夹 tabbar.vue
在static下创建 tab用来放置图片
<img src="https://img2020.cnblogs.com/blog/2237618/202110/2237618-20211028150418269-736133893.png" alt="" loading="lazy"> 
<h3 class="md-end-block md-heading md-focus">tabBar代码</h3>
需要修改 tabList 里的
 　　path：页面路径与pages.json中对应
 　　icon：默认图标
 　　selectIcon：选中图标
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_de303df4-105a-46bc-bb5e-83bcd2ffaa1b" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_de303df4-105a-46bc-bb5e-83bcd2ffaa1b" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_de303df4-105a-46bc-bb5e-83bcd2ffaa1b" class="cnblogs_code_hide">
<pre><template>
<view>
 <view class="tabbar-container" :class="isIpx?'IpxBot':''">
 <view class="tabbar-item" v-for="(item,index) in tabList" :class=""
 @click="changeItem(item)" :key="index">
 <view class="item-top" :style="{padding: item.id == 2?0:'10rpx'}">
 <image :src="tabId==item.id?item.selectIcon:item.icon" mode=""></image>
 </view>
 <view class="item-bottom" :class="">
 <text>{{item.text}}</text>
 </view>
 </view>
 </view>
</view>
</template>

<script>
export default {
 props: {
 currentPage: {
 type: Number,
 default: 0
 }
 },
 data() {
 return {
 //适配IPhoneX
 isIpx: false,
 //底部Tab
 tabId: 0,
 tabList: [{
 id: 0,
 path: "/pages/index/index",
 icon: "/static/tab/home.png",
 selectIcon: "/static/tab/home_select.png",
 text: "首页",
 centerItem: false
 }, {
 id: 1,
 path: "/pages/look/look",
 icon: "/static/tab/look.png",
 selectIcon: "/static/tab/look_select.png",
 text: "展示",
 centerItem: false
 }, {
 id: 2,
 path: "/pages/code/code",
 icon: "/static/tab/select_add.png",
 selectIcon: "/static/tab/select_add.png",
 text: "快速",
 centerItem: true
 }, {
 id: 3,
 path: "/pages/enter/enter",
 icon: "/static/tab/enter.png",
 selectIcon: "/static/tab/enter_select.png",
 text: "入驻",
 centerItem: false
 }, {
 id: 4,
 path: "/pages/my/my",
 icon: "/static/tab/my.png",
 selectIcon: "/static/tab/my_select.png",
 text: "我的",
 centerItem: false
 }],
 };
 },
 mounted() {
 this.tabId = this.currentPage;
 //隐藏原生tab
 uni.hideTabBar();
 },
 created() {
 // 判断为 iPhone X 给予底部距离
 let that = this
 uni.getSystemInfo({
 success: function(res) {
 if (res.model.indexOf('iPhone X') !== -1) {
 that.isIpx = true;
 }
 }
 })
 },
 methods: {
 // tab 切换
 changeItem(item) {
 if (item.id == 2) {
 console.log('点击中间' + '快速');
 } else {
 uni.switchTab({
 url: item.path,
 });
 }
 },

 }
}
</script>
<style scoped>
view {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

.tabbar-container {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 /* height: 100rpx; */
 box-shadow: 0 0 5px #999;
 display: flex;
 align-items: center;
 padding: 5rpx 0;
 color: #999999;
 background-color: #FFFFFF;
}

.tabbar-container .tabbar-item {
 width: 20%;
 height: 100rpx;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
}

.tabbar-container .item-active {
 color: #f5cb2b;
}

.tabbar-container .center-item {
 display: block;
 position: relative;
}

.tabbar-container .tabbar-item .item-top {
 width: 70rpx;
 height: 70rpx;
 padding: 5rpx;
}

.tabbar-container .center-item .item-top {
 flex-shrink: 0;
 width: 130rpx;
 height: 130rpx;
 position: absolute;
 top: -67rpx;
 left: calc(50% - 70rpx);
 border-radius: 50%;
 box-shadow: 0 0 5px #999;
 background-color: #FFFFFF;
}

.tabbar-container .tabbar-item .item-top image {
 width: 100%;
 height: 100%;
}

.tabbar-container .tabbar-item .item-bottom {
 font-size: 25rpx;
 width: 100%;
}

.tabbar-container .center-item .item-bottom {
 position: absolute;
 bottom: 2rpx;
}

/* 适配iPhone X */
.IpxBot {
 padding-bottom: 30rpx !important;
}
</style></pre>
</div>
tabBar代码</div>
<h2 class="md-end-block md-heading md-focus">页面中使用</h2>
<div class="cnblogs_code">
<pre><template>
<view>

 <tab-bar :currentPage="0"></tab-bar>
</view>
</template>

<script>
//导入组件
 import tabBar from '@/components/tabbar/tabbar.vue'
export default {
 data() {
 return {
 };
 },
 components:{
 tabBar
 },
 methods: {}
};
</script></pre>
</div>
<h3 class="md-end-block md-heading md-focus">mian.js中全局导入</h3>
<div class="cnblogs_code">
<pre>//tabBar组件
import tabBar from 'components/tabbar/tabbar.vue'
Vue.component('tabBar', tabBar)</pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/15475714.html 
来源：https://www.cnblogs.com/lovejielive/p/15475714.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 底部导航栏-中间突出