博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序TabBar底部栏的使用
阅读量:6653 次
发布时间:2019-06-25

本文共 1013 字,大约阅读时间需要 3 分钟。

hot3.png

 

app.json文件:

{
    "pages":[
        "pages/index/index",
        "pages/detail/detail"
    ],
    "window":{
        "navigationBarTitleText": "TabBar",
        "navigationBarBackgroundColor": "#F60",
        "navigationBarTextStyle": "white"
    },

//tabBar注意是B是大写,有朋友提问运行时tab没出现,检查是不是这里手误

    "tabBar":{

//文档指出color是必填项,其实可为空,不重写color就是深灰,样式更统一

        "color": "#ddd",

//同样,文档指出selectedColor是必填项,不过selectedColor有必要重写,区分当前项与普通项

        "selectedColor": "#3cc51f",

//同样,文档指出color是必填项,其实可为空,不重写backgroundColor就是浅灰,样式更统一。

        "backgroundColor": "#fff",

//borderStyle,不写默认就是黑,那就黑好了,white的话,会少一条分隔线,跟页面混在一起了

        "borderStyle":"black",
        "list":[{
                "pagePath":"pages/index/index",

//iconPath图标是非必填,只是tab栏会变矮,自然selectedIconPath也可不写

                "iconPath":"image/icon_API.png",
                "selectedIconPath":"image/icon_API_HL.png",
                "text":"index"
            },{
                "pagePath":"pages/detail/detail",
                "iconPath":"image/icon_component.png",
                "selectedIconPath":"image/icon_component_HL.png",
                "text":"detail"
            }]
    }
}

 

对小程序开发有趣的朋友关注公众号: huangxiujie85,QQ群: 575136499,微信: small_application,陆续还将推出更多作品。

输入图片说明

转载于:https://my.oschina.net/huangxiujie/blog/754901

你可能感兴趣的文章
第十二周CorelDRAW课总结
查看>>
【转】Android 环境变量 和 AVD 环境变量 配置
查看>>
[三]java8 函数式编程Stream 概念深入理解 Stream 运行原理 Stream设计思路
查看>>
【转】【SQL SERVER】怎样处理作业中的远程服务器错误(42000)
查看>>
jquery做表格变色效果-demo
查看>>
jquery 实现导航栏滑动效果
查看>>
linux系统下安装mysql数据库(mysql-5.7)
查看>>
MFC控件Slider Control的使用
查看>>
DOM的概念及子节点类型
查看>>
winform程序登陆后关闭登录窗体
查看>>
STL简介_18
查看>>
invalid application of ‘sizeof’ to incomplete type
查看>>
去掉表的identity属性
查看>>
libGDX游戏的生命周期
查看>>
即时通讯软件设计(一)
查看>>
innobackupex 全备、增备脚本
查看>>
关于2017年
查看>>
进程的通信方式
查看>>
vim编辑器命令
查看>>
ES6初探,变量的声明
查看>>