全球快报:微信小程序window导航栏配置(实例详解)

时间:2022-11-15 17:04:00       来源:转载
本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于windows导航栏配置的相关内容,下面就详细介绍如何配置我们的 window 导航栏,希望对大家有帮助。

【相关学习推荐:小程序学习教程】

介绍一下在 wxss 中我们 rpx 的应用以及我们对于小程序全局样式以及局部样式的配置,然后我们将详细介绍如何配置我们的 window 导航栏。


【资料图】

关于 rpx 介绍

特别的在我们微信小程序开发中,我们前面提到过推荐使用 iPhone 6 进行开发,因为 iPhone 的 px =375,那么我们 2 rpx= 1 px

关于全局配置和局部配置

一、全局配置的常用配置项

老规矩先用表格展示一下。

配置项名称作用
pages存放当前小程序所有页面的存放路径
window设置小程序窗口的外观
tabBar设置小程序底部的 tabBar 效果
style是否启用新版的组件的选项

pages 我们前面也介绍过,我们当时为了显示我们 list 页面,我们将 pages 的第一条路径改为我们 list 的路径,然后我们的微信小程序的页面就是显示我们的 list 的内容了

window 和 tabBar 我们接下来看一幅图篇,他介绍了我们这几个配置所所用的区域

style 咱们前面在介绍 button 的时候也带大家看过,当我们将 style 删去时,我们的组件样式就变为老版本的

作用图解

二 、window 导航栏

属性名类型默认值作用
navigationBarTitleTextstring字字符串导航栏标题内容
navigationBarBackgroundColorHexcolor#000000设置导航栏背景颜色(比如荧黄色 #ffa)
navigationBarTextStylestringwhite设置导航栏标题的颜色(仅含有黑色和白色)
backgroundColorHexcolor#ffffff窗口的背景颜色
backgroundTextStylestringdark设置下拉 loading 的样式 仅支持 dark/light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发阈值(距页面底部距离 单位为 px)

我们所有的上述设置都是在 app.json 内的 window 里面进行设置!!!接下来我演示一下 navigationBarTitleText 和 下拉相关属性 ,剩下的配置项大家可以自行尝试!

2.1 navigationBarTitleText 配置项

话不多说开始操作!

打开 app.json ,找到 window

在 window 中我们可以看到下面默认的配置项目

"window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#fff",  "navigationBarTitleText": "Weixin",  "navigationBarTextStyle":"black" },
登录后复制

我们可以看到第三行的 navigationBarTitleText 即为我们的导航栏标题内容的配置,默认为 Weixin ,比如我更改为 “皮皮的小屋”

"window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#fff",  "navigationBarTitleText": "皮皮的小屋",  "navigationBarTextStyle":"black" },
登录后复制

效果展示:

2.2 下拉刷新的配置

首先打开 app.json 进入 window 配置,打开下拉功能

"window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#ffa",  "navigationBarTitleText": "皮皮的小屋",  "navigationBarTextStyle":"black",  "enablePullDownRefresh": true },
登录后复制

在最后一行我们将 enablePullDownRefresh 设置为 true 即可

效果展示:

至此我们对于这些配置就进行了简单的介绍,我们在自行尝试这些配置项的时候需要注意的就是我们 onReachBottomDistance ,他的上拉触底的意思就是我们平时刷购物平台的时候,当我们刷新到离底部一定距离的时候,页面会自动刷新下面的数据,我们就是通过 onReachBottomDistance 设置自动刷新的位置

【相关学习推荐:小程序学习教程】

以上就是微信小程序window导航栏配置(实例详解)的详细内容,更多请关注php中文网其它相关文章!

关键词: 背景颜色 标题内容 意思就是