0
0

猿创征文｜uniapp tabbar自定义风格

文章目录

    **

uniapp tabBar

**，在使用uniapp框架开发项目的时候，官方的tabBar总是满足不了设计稿上面的要求。通常这时候都会自定义tabBar，但是自定义会牺牲一些用户体验，比如在切换的时候tabBar会闪烁，特别是用户的硬件不太高端的时候闪烁得更加明显，还有自定义tabBar使用uni.redirectTo的话切换页面每次都会调用onLoad，页面数据得不到缓存。
这里提供在原生基础上修改tabBar,下面咋们一起来看看如何实现。

uniapp成长之路

   成长，就好比我人生中的一艘小船，行驶在波面上。有时风平浪静，有时也会遇到汹涌辣咸，样样都有。

　　初识uniapp的时候，知道他是跨平台，且开源案列多 ，上手快，正好公司项目，需要这样一个框架，于是从零基础慢慢累积到独立开发完整项目，还好官方针对每个组件，讲解的都很详细，真的是很容易上手（这里针对怕uniapp不易上手的同学们，着重说一下），而且很多成熟的组件案列，基本每个板块的都有。
　　于是 uniapp系列的文章，就是我成长之路的见证，成长之路的笔记，欢迎大家和我一起学习讨论，解决问题，深入研究，创建自己的组件。
　　时代大浪，滚滚向前。如果你顺流而行，可以化身为弄潮儿，大展身手；但如果你逆流而动，则会被大潮猛击，深受重创，乃至粉身碎骨。在名为时代的列车上，有人同步起飞，也有人惨遭抛弃。对前者而言，这是最好的时代；然而对后者来说，这是最坏的时代。

1️⃣ tabBar详解

   如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

   在 **pages.json** 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，**渲染原生tab**。

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/component/index",
        "iconPath": "static/image/icon_component.png",
        "selectedIconPath": "static/image/icon_component_HL.png",
        "text": "组件"
    }, {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}

1.1 tabBar所有属性

在这里插入图片描述

1.2 list所有属性

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

在这里插入图片描述

2️⃣ 中间大图标突出

在实际页面开发中，经常有中间突出的tab需求。在处理数据相对麻烦。 以组件方式来导入，就要在pages.json中配置的tabBar的每一个页面中导入该组件，当然也可以选择全局导入。 组件形式配置，页面的各项生命周期都可以正常使用，重新自定义tabBar样式也方便。

效果图
在这里插入图片描述

2.1 pages.json配置

    "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"
        }]
    }

2.2 创建tabBar组件

在components文件夹下创建 tabbar文件夹 tabbar.vue，在static下创建 tab用来放置图片。

tabBar代码

<template>
    <view>
        <view class="tabbar-container" :class="isIpx?'IpxBot':''">
            <view class="tabbar-item" v-for="(item,index) in tabList" :class="[item.centerItem ? 'center-item' : '']"
                @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="[tabId==item.id ? 'item-active' : '']">
                    <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>

2.3 mian.js中全局导入

//tabBar组件
import tabBar from 'components/tabbar/tabbar.vue'
Vue.component('tabBar', tabBar)

2.4 页面中调用

<template>
    <view>
    <!-- 底部 导航栏  currentPage 当前页面ID -->
        <tab-bar :currentPage="0"></tab-bar>
    </view>
</template>

<script>
    //导入组件
    import tabBar from '@/components/tabbar/tabbar.vue'
    export default {
        data() {
            return {
            };
        },
        components:{
            tabBar
        },
        methods: {}
    };
</script>

3️⃣ 自定义文字图标样式

这个是在原生的基础上，去掉文字显示，改为图片里面自带文字，相当于list里面就一个图片，这个时候自定义宽高，样式在图片里面自定义就可以了，可以使用任何的样式，自己跳跳间距就能完美自定义样式了。

**示例（ 

注：这几个都是图片

）**

在这里插入图片描述

tabBar代码

  • iconWidth：可以自定义宽度
  • borderStyle：边框颜色
  • 注意图片需要两种类型，一种是选择前，一种是选择后，然后因为文字放到图片里面了，需要注意文字的大小，图片的外边间距等等，细节调整。
"tabBar": {
        "color":"#8a8a8a",
        "selectedColor":"#13227A",
        "borderStyle":"black",
        "backgroundColor":"#ffffff",
        "iconWidth": "30px",  
        "list": [
            {
                "pagePath":"pages/cultivate/cultivate",
                "iconPath":"static/px.png",
                "selectedIconPath":"static/px_on.png"
            },
            {
                "pagePath":"pages/test/test",
                "iconPath":"static/test.png",
                "selectedIconPath":"static/test_on.png"
            },
            {
                "pagePath":"pages/index/index",
                "iconPath":"static/xuexi.png",
                "selectedIconPath":"static/xuexi_on.png"
            },
            {
                "pagePath":"pages/exchange/exchange",
                "iconPath":"static/jl.png",
                "selectedIconPath":"static/jl_on.png"
            },
            {
                "pagePath":"pages/me/me",
                "iconPath":"static/me.png",
                "selectedIconPath":"static/me_on.png"
            }
        ]    
     }

原创路上，

不积跬步，无以至千里；不积小流，无以成江海。

 💞 关注博主 带你实现畅游前后端

 🏰 加入社区 带你体验马航不孤单

 💯 神秘个人简介 带你体验不一样得介绍

 🎀 酷炫邀请函 带你体验高大上得邀请

 亲，码字不易，动动小手，欢迎 **点赞 ➕ 收藏**，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌
标签： uni-app 前端 java
本文转载自: https://blog.csdn.net/weixin_43151418/article/details/126578258
版权归原作者 xcLeigh 所有， 如有侵权，请联系我们删除。
登录后发布评论

“猿创征文｜uniapp tabbar自定义风格”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

如何给SaaS应用做安全

【软件测试】自动化常用函数

postman变量和脚本功能介绍

Python Selenium常见的报错以及措施

idea导出配置文件

如何在visual studio中 生成 并 使用dll和lib文件

Docker homeassistant 反向代理 外网访问

文章导航