外国小孩和大人做网站,互联网大会,佛山建站网站模板,广州推广公司实例内容
导航栏样式设置tabBar导航栏 实例一#xff1a;导航栏样式设置
小程序的导航栏样式在app.json中定义。
这里设置导航#xff0c;背景黑色#xff0c;文字白色#xff0c;文字内容测试小程序
app.json内容#xff1a;
{pages:[pages/index…
实例内容
导航栏样式设置tabBar导航栏 实例一导航栏样式设置
小程序的导航栏样式在app.json中定义。
这里设置导航背景黑色文字白色文字内容测试小程序
app.json内容
{pages:[pages/index/index,pages/login/login,pages/logs/logs],window:{backgroundTextStyle:red,navigationBarBackgroundColor: #000,navigationBarTitleText: 测试小程序,navigationBarTextStyle:#fff}
}window中的样式说明
属性类型默认值描述navigationBarBackgroundColorHexColor000000 导航栏背景颜色如”#000000”navigationBarTextStyleStringwhite导航栏标题颜色仅支持 black/whitenavigationBarTitleTextString导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉背景字体、loading 图的样式仅支持 dark/lightenablePullDownRefreshBooleanfalse是否开启下拉刷新
效果 实例二tabBar导航栏
tabBar挺好的可以放置于顶部或者底部用于不同功能页面的切换。
tabBar同样在app.json中进行定义看一下我在app.json中对tabBar的相关定义 tabBar: {selectedColor: #1296db,list: [{pagePath: pages/index/index,text: 首页,iconPath: images/ico-home.png,selectedIconPath: images/ico-home-d.png},{pagePath: pages/setting/setting,text: 设置,iconPath: images/ico-setting.png,selectedIconPath: images/ico-setting-d.png},{pagePath: pages/help/help,text: 帮助,iconPath: images/ico-help.png,selectedIconPath: images/ico-help-d.png}]}
效果 tabBar相关属性定义说明
属性类型必填默认值描述colorHexColor是tab 上的文字默认颜色selectedColorHexColor是tab 上的文字选中时的颜色backgroundColorHexColor是tab 的背景色borderStyleString否blacktabbar上边框的颜色 仅支持 black/whitelistArray是tab 的列表详见 list 属性说明最少2个、最多5个 tabpositionString否bottom可选值 bottom、top
tabBar list定义说明
属性类型必填说明pagePathString是页面路径必须在 pages 中先定义textString是tab 上按钮文字iconPathString是图片路径icon 大小限制为40kb建议尺寸为 81px * 81pxselectedIconPathString是选中时的图片路径icon 大小限制为40kb建议尺寸为 81px * 81px
tabBar 是一个数组只能配置最少2个、最多5个 tabtab 按数组的顺序排序。 图标资源可以从这里获取www.iconfont.cn 博客名称王乐平博客 博客地址http://blog.lepingde.com CSDN博客地址http://blog.csdn.net/lecepin
