微信小程序window导航栏配置(实例详解)

导读:本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于windows导航栏配置的相关内容,下面就详细介绍如何配置我们的 window 导航栏,希望对大家有帮助。 【相关学习推

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

微信小程序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 中我们可以看到下面默认的配置项目

    1

    2

    3

    4

    5

    6

      "window":{

      "backgroundTextStyle":"light",

      "navigationBarBackgroundColor""#fff",

      "navigationBarTitleText""Weixin",

      "navigationBarTextStyle":"black"

     },

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

    1

    2

    3

    4

    5

    6

    "window":{

      "backgroundTextStyle":"light",

      "navigationBarBackgroundColor""#fff",

      "navigationBarTitleText""皮皮的小屋",

      "navigationBarTextStyle":"black"

     },

  • 效果展示:

    在这里插入图片描述

2.2 下拉刷新的配置

关于下拉刷新我相信大家一定经常使用,比如我们使用手机时卡顿了,那么我们习惯性动作就是向下拉动屏幕,这样我们的页面就会重新加载,那么我们如何实现功能呢?

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

    1

    2

    3

    4

    5

    6

    7

      "window":{

      "backgroundTextStyle":"light",

      "navigationBarBackgroundColor""#ffa",

      "navigationBarTitleText""皮皮的小屋",

      "navigationBarTextStyle":"black",

      "enablePullDownRefresh": true

     },

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

  • 效果展示:

    在这里插入图片描述

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

你也想0元试听小码王编程课程吗?
填写信息免费预约
免责申明:以上展示内容来源于合作媒体、企业机构、网友提供或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表小码王官方立场,请读者仅做参考。本文标题:微信小程序window导航栏配置(实例详解),本文链接:https://www.xiaomawang.cn/help/201068.html;欢迎转载,转载请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何涉及有违公德、触犯法律等违法信息,请您立即通过邮件(邮箱号: hzlixy@xiaoma.cn)联系我们及时修正或删除。
校区接待前厅
校区太空走廊
校区教室环境
校区多功能教室
小码王少儿编程体验课程免费预约