微信小程序window导航栏配置(实例详解)
本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于windows导航栏配置的相关内容,下面就详细介绍如何配置我们的 window 导航栏,希望对大家有帮助。
【相关学习推荐:小程序学习教程】
介绍一下在 wxss 中我们 rpx 的应用以及我们对于小程序全局样式以及局部样式的配置,然后我们将详细介绍如何配置我们的 window 导航栏。
一、全局配置的常用配置项
老规矩先用表格展示一下。
配置项名称 | 作用 |
---|---|
pages | 存放当前小程序所有页面的存放路径 |
window | 设置小程序窗口的外观 |
tabBar | 设置小程序底部的 tabBar 效果 |
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 配置项
话不多说开始操作!
2.2 下拉刷新的配置
关于下拉刷新我相信大家一定经常使用,比如我们使用手机时卡顿了,那么我们习惯性动作就是向下拉动屏幕,这样我们的页面就会重新加载,那么我们如何实现功能呢?
至此我们对于这些配置就进行了简单的介绍,我们在自行尝试这些配置项的时候需要注意的就是我们 onReachBottomDistance ,他的上拉触底的意思就是我们平时刷购物平台的时候,当我们刷新到离底部一定距离的时候,页面会自动刷新下面的数据,我们就是通过 onReachBottomDistance 设置自动刷新的位置
【相关学习推荐:小程序学习教程】