导航栏navigation-bar

页面导航条配置节点,用于指定导航栏的一些属性。只能是 page-meta 组件内的第一个节点,需要配合它一同使用。

通过这个节点可以获得类似于调用 wx.setNavigationBarTitle wx.setNavigationBarColor 等接口调用的效果。

如果配合page-meta组件一起使用的话,可以参考官方文档

需要把navigation-bar作为page-meta的第一个节点,而且page-meta作为页面的第一个节点

<page-meta
background-text-style="{{bgTextStyle}}"
background-color="{{bgColor}}"
background-color-top="{{bgColorTop}}"
background-color-bottom="{{bgColorBottom}}"
scroll-top="{{scrollTop}}"
page-style="color: green"
root-font-size="16px"
>
<navigation-bar
title="{{nbTitle}}"
loading="{{nbLoading}}"
front-color="{{nbFrontColor}}"
background-color="{{nbBackgroundColor}}"
/>
</page-meta>

最终效果如下:

小程序开发-页面导航栏navigation-bar组件的更多相关文章

  1. 微信小程序之页面导航栏

    效果图: 页面有点丑,作为初次学习,页面可以要求不那么美观,先学会再说.毕竟后面可以优化的很漂亮. 代码实例如下: <view class="section btn-area" ...

  2. 微信小程序开发--页面结构

    一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...

  3. 微信小程序:自定义导航栏

    在小程序开发的时候会遇到一些页面不需要头部导航,或像淘宝的商品详情一样自定义的导航栏.那先要清楚这导航可不能写死,每种手机的导航都各不相同. 一.在app.json的window对象中定义导航的样式: ...

  4. 小程序开发-6个优秀的UI组件库

    微信小程序开发,当原生的控件不能满足我们时,可以尝试下面几个比较优秀的组件库. 1. WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. ...

  5. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

  6. 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle

    ​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...

  7. 微信小程序实现navbar导航栏

    一.效果图 二.涉及到组件 1.view组件 2.swiper组件 三.原理 整体来讲是比较简单的,顶部的navbar是使用flex进行布局的:下面的内容区域则是使用到swiper组件,使用方式比较简 ...

  8. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  9. 微信小程序-如何自定义导航栏(navigationStyle)?

    小程序是越来越开放了,微信版本 6.6.0可以自定义导航? 先了解下app.json中window配置navigationStyle属性,即导航栏样式,仅支持 default/custom.custo ...

随机推荐

  1. 【av68676164(p55-p58)】 Intel CPU和Linux内存管理

    7.4.1 Intel CPU物理结构 https://www.cnblogs.com/megachen/p/9768115.html x86实模式 实模式 20位:1M内存空间 地址表示方式:段地址 ...

  2. 商业分析-04行为&业务相关数据指标

    [访问深度]用户对产品的了解程度 [弹出率] 弹出率是基于访问回话的 而不是基于页面的,上图中1 4 6 是属于弹出

  3. 关于setTimeout的用法注意事项

    setTimeout setTimeout的定义:setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout的用法:setTimeout(代码片段,执行代码等待的毫 ...

  4. go 字符串

    目录 前言 1.声明/赋值 2.遍历 3.操作 1.截取 2.修改 3.连接 4.比较 5.查长 6.格式化输出 4.字符串优势 跳转 前言 不做文字的搬运工,多做灵感性记录 这是平时学习总结的地方, ...

  5. 存储系列之 VFS虚拟文件系统简介

    引言:文件系统发展到一定阶段,开始进一步抽象和分层.   前面我们介绍了ext系列文件系统和xfs文件系统,这些是Linux使用最多的文件系统,也是很多发布版本默认选择的文件系统.而事实上,Linux ...

  6. Java中的策略模式,完成一个简单地购物车,两种付款策略实例教程

    策略模式是一种行为模式.用于某一个具体的项目有多个可供选择的算法策略,客户端在其运行时根据不同需求决定使用某一具体算法策略. 策略模式也被称作政策模式.实现过程为,首先定义不同的算法策略,然后客户端把 ...

  7. 初始化vtable

    在InstanceKlass::link_class_impl()方法中完成方法连接后会继续初始化vtable与itable,之前已经介绍过vtable与itable,并且在类解析过程中已经完成了大小 ...

  8. Kubernetes实战总结 - 自定义Prometheus

    一.概述 首先Prometheus整体监控结构略微复杂,一个个部署并不简单.另外监控Kubernetes就需要访问内部数据,必定需要进行认证.鉴权.准入控制, 那么这一整套下来将变得难上加难,而且还需 ...

  9. 实战分享丨MySQL 与Django版本匹配相关经验

    摘要:关于MySQL 与Django版本匹配相关知识的经验分享. run: (env) E:\PythonPro\PyDjangoProDemo011\xuanyuaniotpro>python ...

  10. 非确定性有穷状态决策自动机练习题Vol.2 C. 奇袭

    非确定性有穷状态决策自动机练习题Vol.2 C. 奇袭 题目描述 由于各种原因,桐人现在被困在\(Under World\)(以下简称\(UW\))中,而\(UW\)马上 要迎来最终的压力测试--魔界 ...