DaiXT:uni-app使用原生tabBar来实现底部导航栏

页面效果:

第一步:新建一个如下所示uni-app的项目

第二步:在pages文件中新建tabBar文件夹,然后根据项目所需新建若干页面。(可在相应页面写上相应的提示)

第三步:icon素材采集,可在阿里矢量库中选取所需素材(点击和被点击的两色素材、png格式),然后放置在项目下static目录下(该素材免费,但因版权问题仅可供学习使用)。

第四步:在pages.json文件中书写tabBar,注意和前面要用逗号隔开

"tabBar":{
        "color":"#666",
        "selectedColor":"#f07373",
        "backgroundColor":"#fff",
        "list":[
            {
                //点击显示页面的路径
                "pagePath":"pages/tabBar/home/home",
                //未点击时页面的图标显示-icon 大小限制为 40kb,当 position 为 top 时,此参数无效
                "iconPath":"static/home.png",    
                //点击时页面的图标显示-icon 大小限制为 40kb,当 position 为 top 时,此参数无效
                "selectedIconPath":"static/home-active.png",
                //按钮上的文字
                "text":"首页"
            },
            {
                "pagePath":"pages/tabBar/follow/follow",
                "iconPath":"static/follow.png",                
                "selectedIconPath":"static/follow-active.png",
                "text":"关注"
            },
            {
                "pagePath":"pages/tabBar/my/my",
                "iconPath":"static/my.png",                
                "selectedIconPath":"static/my-active.png",
                "text":"我的"
            }
        ]
    }

注:有可能会遇到的问题

设置默认首页:在pages.json文件中,根据页面排列顺序决定。

显示页面,如果页面不现实,则有可能缺少页面路径!复制该括号内容修改路径即可显示!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app是一个跨平台的开发框架,可以同时开发多个平台的应用程序,包括小程序、H5、App等。在uni-app中,原生tabBar可以通过配置页面的方式来实现。 首先,在uni-app的项目中,找到pages.json文件。在这个文件中,可以配置页面的信息,包括tabBar的配置。 在pages.json文件中,可以通过设置"tabBar"字段来配置tabBar的样式和页面列表。示例如下: ```json { "pages": [ { "path": "pages/home/home", "name": "home", "meta": { "title": "首页" } }, { "path": "pages/discover/discover", "name": "discover", "meta": { "title": "发现" } }, { "path": "pages/mine/mine", "name": "mine", "meta": { "title": "我的" } } ], "tabBar": { "color": "#000000", "selectedColor": "#ff0000", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "/static/tabbar/home.png", "selectedIconPath": "/static/tabbar/home-selected.png" }, { "pagePath": "pages/discover/discover", "text": "发现", "iconPath": "/static/tabbar/discover.png", "selectedIconPath": "/static/tabbar/discover-selected.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "/static/tabbar/mine.png", "selectedIconPath": "/static/tabbar/mine-selected.png" } ] } } ``` 在以上的配置中,"tabBar"字段下的"color"表示tabBar的默认文字颜色,"selectedColor"表示选中后的文字颜色,"backgroundColor"表示tabBar的背景色,"borderStyle"表示底部边框样式。 在"list"数组中,可以配置tabBar的每个页面,包括页面路径、文字、图标路径等。 通过以上的配置,就可以实现原生tabBar效果。在uni-app中,点击tabBar上的图标可以切换到对应的页面。 希望能解答到你的问题,如果还有其他问题,请继续提问!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值