深圳官方网站建设,wordpress 小工具区,设计常去的网站,仪征市建设工程网站学习的最大理由是想摆脱平庸#xff0c;早一天就多一份人生的精彩#xff1b;迟一天就多一天平庸的困扰。各位小伙伴#xff0c;如果您#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持#xff0c;想组团高效学习… 想写博客但无从下手#xff0c;急需… 学习的最大理由是想摆脱平庸早一天就多一份人生的精彩迟一天就多一天平庸的困扰。各位小伙伴如果您 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持想组团高效学习… 想写博客但无从下手急需写作干货注入能量… 热爱写作愿意让自己成为更好的人… 文章目录 前言一、全局配置1、全局配置文件及常用的配置项 二、全局配置 - window1、小程序窗口的组成部分2、了解 window 节点常用的配置项3、设置导航栏的标题4、设置导航栏的背景色5、设置导航栏的标题颜色6、全局开启下拉刷新功能7、设置下拉刷新时窗口的背景色8、设置下拉刷新时 loading 的样式9、设置上拉触底的距离 三、全局配置 - tabBar1、什么是 tabBar2、tabBar 的 6 个组成部分3、tabBar 节点的配置项4、每个 tab 项的配置选项 四、全局配置 - 案例配置 tabBar1、实现步骤2、步骤1 - 拷贝图标资源3、步骤2 - 新建 3 个对应的 tab 页面4、步骤3 - 配置 tabBar 选项5、完整的配置代码 总结 前言
一、全局配置 1、全局配置文件及常用的配置项 二、全局配置 - window 1、小程序窗口的组成部分 2、了解 window 节点常用的配置项 3、设置导航栏的标题 4、设置导航栏的背景色 5、设置导航栏的标题颜色 6、全局开启下拉刷新功能 7、设置下拉刷新时窗口的背景色 8、设置下拉刷新时 loading 的样式 9、设置上拉触底的距离 三、全局配置 - tabBar 1、什么是 tabBar 2、tabBar 的 6 个组成部分 3、tabBar 节点的配置项 4、每个 tab 项的配置选项 四、全局配置 - 案例配置 tabBar 1、实现步骤 2、步骤1 - 拷贝图标资源 3、步骤2 - 新建 3 个对应的 tab 页面 4、步骤3 - 配置 tabBar 选项 5、完整的配置代码 一、全局配置
1、全局配置文件及常用的配置项
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下
pages 记录当前小程序所有页面的存放路径 window 全局设置小程序窗口的外观 tabBar 设置小程序底部的 tabBar 效果 style 是否启用新版的组件样式
二、全局配置 - window
1、小程序窗口的组成部分 2、了解 window 节点常用的配置项 3、设置导航栏的标题
设置步骤app.json - window - navigationBarTitleText 需求把导航栏上的标题从默认的 “WeChat”修改为“哥的时代”效果如图所示
4、设置导航栏的背景色
设置步骤app.json - window - navigationBarBackgroundColor 需求把导航栏标题的背景色从默认的 #fff 修改为 #2b4b6b 只支持十六进制不支持文本颜色效果如图所示
5、设置导航栏的标题颜色
设置步骤app.json - window - navigationBarTextStyle 需求把导航栏上的标题颜色从默认的 black 修改为 white 效果如图所示
6、全局开启下拉刷新功能
概念下拉刷新是移动端的专有名词指的是通过手指在屏幕上的下拉滑动操作从而重新加载页面数据的行为。 设置步骤app.json - window - 把 enablePullDownRefresh 的值设置为 true
注意在 app.json 中启用下拉刷新功能会作用于每个小程序页面
7、设置下拉刷新时窗口的背景色
当全局开启下拉刷新功能之后默认的窗口背景为白色。如果自定义下拉刷新窗口背景色设置步骤为: app.json - window - 为 backgroundColor 指定16进制的颜色值 #efefef。效果如下
8、设置下拉刷新时 loading 的样式
当全局开启下拉刷新功能之后默认窗口的 loading 样式为白色如果要更改 loading 样式的效果设置步骤为 app.json - window - 为 backgroundTextStyle 指定 dark 值。效果如下
9、设置上拉触底的距离
概念上拉触底是移动端的专有名词通过手指在屏幕上的上拉滑动操作从而加载更多数据的行为。 设置步骤 app.json - window - 为 onReachBottomDistance 设置新的数值
注意默认距离为50px如果没有特殊需求建议使用默认值即可。
三、全局配置 - tabBar
1、什么是 tabBar
tabBar 是移动端应用常见的页面效果用于实现多页面的快速切换。小程序中通常将其分为
底部 tabBar顶部 tabBar
注意
tabBar中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar 时不显示 icon只显示文本
2、tabBar 的 6 个组成部分 backgroundColortabBar 的背景色selectedIconPath选中时的图片路径borderStyletabBar 上边框的颜色iconPath未选中时的图片路径selectedColortab 上的文字选中时的颜色colortab 上文字的默认未选中颜色
3、tabBar 节点的配置项 4、每个 tab 项的配置选项 四、全局配置 - 案例配置 tabBar
1、实现步骤
拷贝图标资源新建 3 个对应的 tab 页面配置 tabBar 选项
2、步骤1 - 拷贝图标资源
把放图片的 images 文件夹拷贝到小程序项目根目录中 将需要用到的小图标分为 3 组每组两个其中 图片名称中包含 -active 的是选中之后的图标 图片名称中不包含 -active 的是默认图标 截图如下
3、步骤2 - 新建 3 个对应的 tab 页面
通过 app.json 文件的 pages 节点快速新建 3 个对应的 tab 页面示例代码如下 其中home 是首页message 是消息页面contact 是联系我们页面。
4、步骤3 - 配置 tabBar 选项
打开 app.json 配置文件和 pages、window 平级新增 tabBar 节点tabBar 节点中新增 list 数组这个数组中存放的是每个 tab 项的配置对象在 list 数组中新增每一个 tab 项的配置对象。对象中包含的属性如下 pagePath 指定当前 tab 对应的页面路径【必填】text 指定当前 tab 上按钮的文字【必填】iconPath 指定当前 tab 未选中时候的图片路径【可选】selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
5、完整的配置代码 tabBar: {list: [{pagePath: pages/home/home,text: 首页,iconPath: /images/home.png,selectedIconPath: /images/home-active.png},{pagePath: pages/message/message,text: 消息,iconPath: /images/message.png,selectedIconPath: /images/message-active.png},{pagePath: pages/contact/contact,text: 联系我们,iconPath: /images/contact.png,selectedIconPath: /images/contact-active.png}]},总结
以上就是微信小程序之全局配置-window和tabBar的相关知识点希望对你有所帮助。 积跬步以至千里积怠惰以至深渊。时代在这跟着你一起努力哦
