微信小程序窗口导航栏配置（详细示例）（微信小程序导航栏系统按钮）

本文提供了微信小程序的相关知识。 本文主要介绍配置Windows导航栏相关的相关内容。 下面，我们将详细介绍如何设置窗口导航栏。 我希望这对你有帮助。

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

rpx在wxss中的应用以及全局样式和本地小程序配置样式介绍。 接下来，我们将仔细研究窗口导航栏的配置。

关于引入rpx

特别是微信小程序开发，推荐使用前面提到的iPhone 6进行开发。 。 由于iPhone上px = 375，所以2 rpx = 1 px

关于全局设置和本地设置

1.全局设置的常用设置项

先显示旧规则。如下所示。

设置项名称 功能 Page 存储当前小程序窗口所有页面的保存路径。 设置小程序窗口的 tabBar 的外观。 在小程序的底部设置一个 tabBar。 效果风格。 新版本是否启用组件选项

pages 之前介绍过，为了显示列表页面，将页面的第一个路径改为列表的路径，就会显示微信小程序页面完成了。 列表内容

窗口和选项卡栏现在让我们看一个介绍配置中使用的区域的图表。

风格。 之前我们介绍按钮的时候就已经介绍过了。 当您删除样式时，组件的样式将更改为旧版本。

功能图

二、窗口导航栏属性名称 类型 默认值 功能 Navigator BarTitleTextstring String 导航栏标题 内容导航nBarBackgroundColorHexcolor#000000 设置导航栏的背景颜色（例如荧光黄#ffa）。 NavigationBarTextStylestringwhite 设置导航栏标题颜色（仅限黑色和白色）。 -downloading dark/lightenablePullDownRefreshBooleanfalse 仅支持 是否全局启用下拉更新 onReachBottomDistanceNumber50 触发页面下拉事件的阈值（距页面底部的距离，单位为像素）

以上所有设置，在 app.json 中在 windows 上设置。 ！ ！ 以下是与 navigationBarTitleText 和下拉菜单相关的属性。 其余配置项您可以自行尝试。

2.1 NavigationBarTitleText设置项

让我们开始吧。

打开app.json，找到窗口

窗口显示以下默认配置项。

"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor ": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" },

第3行NavigationBarTitleTe为显示。xt是导航栏标题内容的组成。 默认是微信。 例如改为 "皮皮的小屋"

"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff ", "navigationBarTitleText": "皮皮的小屋", "navigationBarTextStyle": did 。 "black" },

效果展示：

2.2下拉更新设置

首先打开app.json，进入窗口设置，创建下拉功能

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

最后一行将enablePullDownRefresh 设置为true。

效果展示：

这些配置我已经简单介绍了，我自己也在尝试。 配置项目时，需要注意onReachBottomDistance。 这种拉升和触底回升意味着我们通常会浏览购物平台。当刷新到距离底部一定距离时，页面会自动更新以下数据： 通过onReachBottomDistance设置自动更新位置

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

p> 下载微信小程序

微信是一款支持语音消息、视频的移动通讯软件支持发送。 、照片和文本通过移动电话网络。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

下载！

这几篇文章你可能也喜欢：

• 简介：实现小程序的授权登录功能
• 微信小程序列表渲染示例介绍（小程序渲染HTML代码）
• 微信小程序支付中如何操作Paysign二次加密（2022年10月最新）
• 10分钟完成小程序条件渲染（微信小程序条件渲染）
• 微信小程序常用API（总结分享）（如何创建微信小程序的API接口）

本文由主机参考刊发，转载请注明：微信小程序窗口导航栏配置（详细示例）（微信小程序导航栏系统按钮） https://zhujicankao.com/140275.html