本文为您带来了微信小程序的相关知识，主要介绍了windows导航栏配置的相关内容，详细介绍了如何配置我们 window 导航栏，希望对大家有所帮助。

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

介绍一下在 wxss 中我们 rpx 我们将详细介绍小程序的整体风格和局部风格的配置，然后我们将详细介绍如何配置我们 window 导航栏。

• 关于 rpx 介绍

  1. 我们以前做过 HTML 我在学习中学到了 px(分辨率)这个单位经常用于我们设置的组件，那么我们在微信小程序中使用的分辨率单位是什么呢？那就是rpx，那么他有什么特别的，值得专门设置呢？

  2. rpx 微信小程序是独一无二的。解决屏幕自适应的尺寸单元可根据屏幕宽度进行自适应。无论屏幕大小，屏幕宽度都应为750rpx 通过rpx 设置元素和字体的大小，小程序可以在不同尺寸的屏幕下自动适应 rpx 和 px之间的转换

  特别是在我们的微信小程序开发中，我们之前提到过推荐使用 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 导航栏

我们 window 导航栏的设置包括我们前面图片显示的前两个区域。让我们先介绍一下 window 常见的节点配置项。

属性名 类型 默认值 作用 navigationBarTitleText string 字字符串 导航栏标题内容 navigationBarBackgroundColor Hexcolor #000000 设置导航栏的背景颜色(如荧黄色) #ffa） navigationBarTextStyle string white 设置导航栏标题的颜色(只有黑色和白色) backgroundColor Hexcolor #ffffff 窗户的背景颜色 backgroundTextStyle string dark 设置下拉 loading 的样式 仅支持 dark/light enablePullDownRefresh Boolean false 是否全局开启下拉刷新？ onReachBottomDistance Number 50 页面上拉触底事件触发阈值(从页面底部的距离) 单位为 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导航栏配置(实例详解)的详细内容，请关注其他相关文章！