学习教程-小程序开发之window配置与底部导航三

作者: 路羽

全网最全的网络资源分享网站

手机扫码查看

路羽资源网 每日一分享

在前端开发中,我们经常要配置我们主题色(导航栏颜色,导航栏文字等),以及主页下面的底部导航栏(Tabbar)样式,来看看小程序是如何快速配置这些东西的。

window配置:
1.要配置window,我们只需要在app.json文件中进行配置就好了。


navigationBarBackgroundColor:导航栏顶部的颜色,这个配置之后,所有页面的导航栏颜色都生效。

学习教程-小程序开发之window配置与底部导航三

navigationBarTextStyle:导航栏文字的颜色。

navigationBarTitleText:导航栏的文字。

学习教程-小程序开发之window配置与底部导航三

backgroundColor:窗口的背景颜色(不是页面的背景色),当下拉刷新的时候,可以看到下拉刷新时候的颜色会有变化。

学习教程-小程序开发之window配置与底部导航三

backgroundTextStyle:下拉 loading 的样式,仅支持dark / light。

学习教程-小程序开发之window配置与底部导航三

enablePullDownRefresh:是否可以下拉刷新,一般配置为false,如果哪个页面需要配置下拉刷新,直接在页面的json文件中,将这个配置改为true。

"window": { "navigationBarBackgroundColor": "#d81e06", "navigationBarTextStyle": "white", "navigationBarTitleText": "首页", "backgroundColor": "#ddff33", "backgroundTextStyle": "light", "enablePullDownRefresh": true },
Tabbar配置:
tabbar中需要传递一个list,list的元素至少有两个,就是说最少tabbar要有两个标签,最多有5个。

pagePath:当前tabbar跳转的页面,例如pages/home/home

text:当前tabbar的文字


iconPath:当前tabbar的图标路径,未被选中的样式(图片路径一般在项目中新建一个assets文件夹,将图片放入到assets文件夹中,如果需要拷贝路径,可以右键需要拷贝的图片,选择复制相对路径)


selectedIconPath:选中当前tabbar的图标路径。

学习教程-小程序开发之window配置与底部导航三

selectedColor:选中的文字的颜色,这个属性和list同级,并不是属于list中

学习教程-小程序开发之window配置与底部导航三

"tabBar": { "selectedColor": "#d81e06", "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "assets/home_unpress.png", "selectedIconPath": "assets/home_press.png" }, { "pagePath": "pages/about/about", "text": "我的", "iconPath": "assets/mine_unpress.png", "selectedIconPath": "assets/mine_press.png" } ] }

分享到:
打赏
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽资源博客
原文地址: 《学习教程-小程序开发之window配置与底部导航三》 发布于2020-6-1

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏