宜宾网站建设公司

微信小程序window导航栏配置的方法是什么

这篇文章主要介绍“微信小程序window导航栏配置的方法是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序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 节点常见的配置项。

属性名类型默认值作用
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 即可

关于“微信小程序window导航栏配置的方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。


分享题目：微信小程序window导航栏配置的方法是什么
分享网址：http://ybzwz.com/article/johhjh.html

其他资讯