• 技术文章 >微信小程序 >小程序开发

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

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

    php入门到就业线上直播课:进入学习

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

    介绍一下在 wxss 中我们 rpx 的应用以及我们对于小程序全局样式以及局部样式的配置,然后我们将详细介绍如何配置我们的 window 导航栏。

    一、全局配置的常用配置项

    老规矩先用表格展示一下。

    配置项名称作用
    pages存放当前小程序所有页面的存放路径
    window设置小程序窗口的外观
    tabBar设置小程序底部的 tabBar 效果
    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 配置项

    话不多说开始操作!

    2.2 下拉刷新的配置

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

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

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

    以上就是微信小程序window导航栏配置(实例详解)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:微信小程序
    上一篇:微信小程序实例介绍之列表渲染 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 微信小程序自动化部署• 微信小程序开发之宿主环境详解• 一起来聊聊微信小程序之事件绑定• 海南健康码小程序叫什么• 教你如何在小程序中用公众号模板消息(附详细思路)
    1/1

    PHP中文网