更新记录

0.0.9(2022-06-30)

  • 新增 支持 ios 安全区

0.0.8(2021-09-06)

  • 修复 VUE3 main.js 重复引用 app.vue 的问题
查看更多

平台兼容性

底部带加号选项卡

很多App的底部tabBar中间会有一个异型图标,比如抖音。

如果想要中间图标凸起,pages.json里可以配midbutton,但midbutton只有App支持。如果想在小程序端实现中间凸起,因为小程序的限制就不得不自定义tabBar,这又会带来性能和体验问题。

但其实,目前主流App的tabBar中间按钮并不凸起,比如抖音。

本模板提供了仿抖音示例,中间加号图标不凸起,在可以没有text文字的平台将不显示text文字,并且可以跨端运行。

效果示例

使用说明

  • 配置pages.json
"tabBar": {
        "borderStyle": "black",
        "backgroundColor": "#333",
        "color": "#8F8F94",
        "selectedColor": "#f33e54",
        "list": [{
                "pagePath": "pages/tabbar/tabbar-1/tabbar-1",
                "iconPath": "static/img/tabbar/home.png",
                "selectedIconPath": "static/img/tabbar/homeactive.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/tabbar/tabbar-2/tabbar-2",
                "iconPath": "static/img/tabbar/guanzhu.png",
                "selectedIconPath": "static/img/tabbar/guanzhuactive.png",
                "text": "关注"
            },
            //#ifdef MP-WEIXIN
            {
                "pagePath": "pages/tabbar/tabbar-3/tabbar-3",
                "iconPath": "static/img/tabbar/add.png",
                "selectedIconPath": "static/img/tabbar/addactive.png",
                "text": "发布"
            },
            //#endif
            //#ifndef MP-WEIXIN
            {
                "pagePath": "pages/tabbar/tabbar-3/tabbar-3",
                "iconPath": "static/img/tabbar/add.png",
                "selectedIconPath": "static/img/tabbar/addactive.png"
            },
            //#endif
            {
                "pagePath": "pages/tabbar/tabbar-4/tabbar-4",
                "iconPath": "static/img/tabbar/news.png",
                "selectedIconPath": "static/img/tabbar/newsactive.png",
                "text": "消息"
            },
            {
                "pagePath": "pages/tabbar/tabbar-5/tabbar-5",
                "iconPath": "static/img/tabbar/me.png",
                "selectedIconPath": "static/img/tabbar/meactive.png",
                "text": "我"
            }
        ]
    }
  • 在tabbar中间按钮对应的页面中,写入项目对应附加功能。详见代码示例:pages/tabbar/tabbar-3/tabbar-3.vue 页面
  • 因为小程序的平台差异,所以底部文字必须显示,否则图标偏上显示。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问