更新记录

0.0.9(2022-06-30)

  • 新增 支持 ios 安全区

0.0.8(2021-09-06)

  • 修复 VUE3 main.js 重复引用 app.vue 的问题

0.0.7(2021-07-28)

适配 VUE3 (需要 HBuilderX 3.2.0+)

查看更多

平台兼容性

底部带加号选项卡

很多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. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

底部选项卡模板(以下简称软件)源码使用许可协议

2022年10月

本许可协议,是数字天堂(北京)网络技术有限公司(以下简称DCloud)对其所拥有著作权的“软件”,提供的使用许可协议。

您对“软件”的复制、使用、修改及分发受本许可协议的条款的约束,如您不接受本协议,则不能使用、复制、修改本软件。

授权许可范围

a) 授予您永久性的、全球性的、免费的、非独占的、不可撤销的本软件的源码使用许可,您可以使用这些源码制作自己的应用。

b) 您只能在DCloud产品体系内使用本软件及其源码。您不能将源码修改后运行在DCloud产品体系之外的环境,比如客户端脱离uni-app,或服务端脱离uniCloud(如涉及uniCloud)。

c) DCloud未向您授权商标使用许可。您在根据本软件源码制作自己的应用时,需以自己的名义发布软件,而不是以DCloud名义发布。

d) 本协议不构成代理关系。

DCloud的责任限制 “软件”在提供时不带任何明示或默示的担保。在任何情况下,DCloud不对任何人因使用“软件”而引发的任何直接或间接损失承担责任,不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。

您的责任限制

a) 您需要在授权许可范围内使用软件。

b) 您在分发自己的应用时,不得侵犯DCloud商标和名誉权利。

c) 您不得进行破解、反编译、套壳等侵害DCloud知识产权的行为。您不得利用DCloud系统漏洞谋利或侵害DCloud利益,如您发现DCloud系统漏洞应第一时间通知DCloud。您不得进行攻击DCloud的服务器、网络等妨碍DCloud运营的行为。未经书面许可,您不得利用DCloud的产品进行与DCloud争夺开发者的行为。

d) 如您违反本许可协议,需承担因此给DCloud造成的损失。

本协议签订地点为中华人民共和国北京市海淀区。

根据发展,DCloud可能会对本协议进行修改。修改时,DCloud会在产品或者网页中显著的位置发布相关信息以便及时通知到用户。如果您选择继续使用本框架,即表示您同意接受这些修改。

条款结束

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