更新记录

1.0.1（2023-10-22）

更新在小程序中显示问题

1.0.0（2023-10-22）

自定义一个底部菜单栏，附有动画效果，传值即可使用，有default显示页面模式和swiper轮播图显示模式的传值，可便于开发时多个选择，使用该底部菜单栏后，建议开发者使用的菜单栏页面以组件的形式进行开发，如：首页、个人中心等在菜单栏使用的页面，否则无法起到该插件的基本效果。其他页面可正常在pages编写

平台兼容性

组件名：yg-tabbar 代码块： <yg-tabbar />

一款轻量级的uniapp底部自定义菜单栏组件，自用而开发的插件，方便因uniapp的原生组件无法实现自己想要的一些其他功能而开发的。

注意事项 该组件使用时请把需要添加的页面改为组件编写，不然无法获得组件的效果，如首页，请生成componets文件夹中的组件进行页面编写，因为不是原生uniapp的组件，做不到直接连接pages文件夹中的页面进行切换，所以必须组件化写入相对应的页面，不然无法获得相对应的效果。

引入方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法 示例

<yg-tabbar :tbStyle="tbStyle" @pagesChange="pagesChange" />

开启动画 示例

<yg-tabbar :tbStyle="tbStyle" :iconAnimation="iconAnimation" @pagesChange="pagesChange" />

同步切换 示例

<yg-tabbar :tbStyle="tbStyle":swiperCurrent="swiperCurrent" @pagesChange="pagesChange" />

开启角标 示例

<yg-tabbar :tbStyle="tbStyle":iconNumbers="iconNumbers" @pagesChange="pagesChange" />

data(){
    retrun {
        //角标显示，sort表示要显示的是第几个角标，起始值是0,num表示显示的数据,0不显示,大于0时才显示
        iconNumbers: {
                sort: 0,
                num: 99
        }, 
    }
}

data需要传入的值

    tbStyle：{
       list:[{
            image: '', //默认显示图片,图片大小为60rpx,但是最好用60px得图片,
            selectImage: '', //选中后显示得图片,图片大小为60rpx,但是最好用60px得图片,
            txt: '首页' ,//图标文字
            icon:0，//角标，如购物车类的，消息类的需要用到角标的填写，没有可以不写

        }],
        defaultcolor: '#8A8A8A', //默认字体颜色
        selectListTxtColor: '#4970c4', //选中后字体颜色
        selectIndex: 0, //选中之后的下标
        defaultFontSizi: '24rpx' ,//字体大小
        iconNumber:[]//小角标显示的地方，跟list的下标一致
    }，
    iconAnimation:false,//是否显示切换图标动画

methods方法

         //轮播图滑动的页面切换，
        swiperChange(e) {
            this.swiperCurrent = e.detail.current
        },
        //以轮播图方式显示的滑动页面，来获取菜单下标
        currentChange(data) {
            this.swiperCurrent = data;
        },
        //以正常切换页面的方式切换组件
        pagesChange(e) {
            this.pageShow = e;
        }

完整页面切换示例

<template>
    <view>
        <view class="content" v-if="pagesFn=='swiper'">
            <swiper :indicator-dots="false" :autoplay="false" :duration="200" :current="swiperCurrent"
                @change="swiperChange">
                <swiper-item>
                    <view>
                        <yg-home />
                    </view>
                </swiper-item>
                <swiper-item>
                    <view>
                        <yg-classify />
                    </view>
                </swiper-item>
                <swiper-item>
                    <view>
                        <yg-user />
                    </view>
                </swiper-item>
            </swiper>
            <yg-tabbar :tbStyle="tbStyle" :iconNumbers="iconNumbers" :animationIcon="animationIcon"
                :swiperCurrent="swiperCurrent" @currentChange="currentChange" />
        </view>
        <view class="content" v-if="pagesFn=='default'">
            <yg-home v-if="pageShow=='首页'"/>
            <yg-classify v-if="pageShow=='分类页'"/>
            <yg-user v-if="pageShow=='个人中心'"/>
            <yg-tabbar :tbStyle="tbStyle" :iconNumbers="iconNumbers" :animationIcon="animationIcon"
                :swiperCurrent="swiperCurrent" @pagesChange="pagesChange" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tbStyle: {
                    list:[
                        {
                            image: '/static/images/tabBarImage/home.png', //默认显示图片,图片大小为60rpx,但是最好用60px得图片,
                            selectImage: '/static/images/tabBarImage/selectHome.png', //选中后显示得图片,图片大小为60rpx,但是最好用60px得图片,
                            txt: '首页' ,//图标文字

                        },{
                            image: '/static/images/tabBarImage/home.png', //默认显示图片,图片大小为60rpx,但是最好用60px得图片,
                            selectImage: '/static/images/tabBarImage/selectHome.png', //选中后显示得图片,图片大小为60rpx,但是最好用60px得图片,
                            txt: '首页' ,//图标文字

                        },{
                            image: '/static/images/tabBarImage/home.png', //默认显示图片,图片大小为60rpx,但是最好用60px得图片,
                            selectImage: '/static/images/tabBarImage/selectHome.png', //选中后显示得图片,图片大小为60rpx,但是最好用60px得图片,
                            txt: '首页' ,//图标文字

                        }
                    ]
                }, //底部菜单样式表,详情请到组件中查看组件传值实例,组件只显示<5的菜单列表
                iconNumbers: {
                    sort: 0,
                    num: 99
                }, //角标显示，sort表示要显示的是第几个角标，起始值是0,num表示显示的数据,0不显示,大于0时才显示
                animationIcon: false, //是否开启切换动画,开启后,图标会出现动画放大缩小,关闭时图标会默认为放大
                swiperCurrent: 0, //轮播图swiper的current赋值到这里,tabBar点击事件的值也回传到这里
                pagesFn: 'swiper' ,//两种显示方式，swiper是轮播图式的页面翻页显示，swiper方式,currentChange函数会传一个Number下标值,你可以定义一个变量来使用，控制current的切换;default是正常的切换页面显示,显示方式如果是default,pagesChange函数会回传一个你自定义的菜单名,你可以在data中定义一个变量来使用
                pageShow:'首页'//定义一个变量，在组件上用v-if来负责显示底部菜单栏点击后应该显示哪个页面
            }
        },
        onLoad() {

        },
        methods: {
            //轮播图滑动的页面切换，
            swiperChange(e) {
                this.swiperCurrent = e.detail.current
            },
            //以轮播图方式显示的滑动页面，来获取菜单下标
            currentChange(data) {
                this.swiperCurrent = data;
            },
            //以正常切换页面的方式切换组件
            pagesChange(e) {
                this.pageShow = e;
            }
        }
    }
</script>

<style scoped>
    swiper {
        width: 100%;
        background-color: #fff;
        height: calc(100vh - 115rpx);
    }
</style>

API yg-tabbar Props

tbStyle包含的属性

methods方法

另：制作不易，请大家轻点喷，有任何建议或者意见，都可以留言，后续会开发相对应的导航组件和页面配套组件