更新记录

1.0.0（2024-06-05） 下载此版本

自定义底部导航样式，IOS底部黑条适配，两种文字展示样式 展示样式可自定义修改

平台兼容性

tabBar 自定义底部导航

• props参数说明

• 导航数组参数说明

pageUrl: '/pages/index/index',   //跳转页面路径
name: '扫一扫',   //展示文字
icon1: '../../static/sao.png',   //默认图标
icon2: '../../static/sao.png',   //选中图标
style: 1   //展示样式 0正常 1凸起

• 页面引用实例代码

<template>
    <view>
        <tabBar :pageIndex="0" :textType="1" @toTab="toTab"></tabBar>
    </view>
</template>

<script>
    import tabBar from '@/components/tabBar/tabBar.vue';
    export default {
        components: {
            tabBar
        },
        data() {
            return {

            }
        },
        onReady() {

        },
        onLoad() {

        },
        methods: {

            // 点击切换页面事件
            toTab(data){
                console.log(data);
                uni.redirectTo({
                    url: data.pageUrl
                });
            }

        }
    }
</script>

<style>

</style>