小程序开发-页面导航栏navigation-bar组件
导航栏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组件的更多相关文章
- 微信小程序之页面导航栏
		
效果图: 页面有点丑,作为初次学习,页面可以要求不那么美观,先学会再说.毕竟后面可以优化的很漂亮. 代码实例如下: <view class="section btn-area" ...
 - 微信小程序开发--页面结构
		
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
 - 微信小程序:自定义导航栏
		
在小程序开发的时候会遇到一些页面不需要头部导航,或像淘宝的商品详情一样自定义的导航栏.那先要清楚这导航可不能写死,每种手机的导航都各不相同. 一.在app.json的window对象中定义导航的样式: ...
 - 小程序开发-6个优秀的UI组件库
		
微信小程序开发,当原生的控件不能满足我们时,可以尝试下面几个比较优秀的组件库. 1. WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. ...
 - 微信小程序入门四: 导航栏样式、tabBar导航栏
		
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...
 - 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle
		
 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...
 - 微信小程序实现navbar导航栏
		
一.效果图 二.涉及到组件 1.view组件 2.swiper组件 三.原理 整体来讲是比较简单的,顶部的navbar是使用flex进行布局的:下面的内容区域则是使用到swiper组件,使用方式比较简 ...
 - 微信小程序自定义底部导航栏组件+跳转
		
微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...
 - 微信小程序-如何自定义导航栏(navigationStyle)?
		
小程序是越来越开放了,微信版本 6.6.0可以自定义导航? 先了解下app.json中window配置navigationStyle属性,即导航栏样式,仅支持 default/custom.custo ...
 
随机推荐
- U盘数据泄露,用不到30行的Python代码就能盗走
			
今天跟大家分享下一段简单的代码,希望能给经常用U盘的人警戒,提高信息安全意识. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做 ...
 - C#LeetCode刷题之#39-组合总和(Combination Sum)
			
目录 问题 示例 分析 问题 该文章已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3663 访问. 给定一个无重复元素的数组 candi ...
 - JavaScript apply使用
			
call 和 apply 作用: 都是为了改变某个函数运行的context上下文而存在的,为了改变函数体内部 this的指向 JavaScript函数存在定义时上下文和运行时上下文, 上下文(cont ...
 - 精灵小巧的 Jsonpath 万精油:Snack3
			
前几天和一个群里的朋友交流一个需求:在 Json 里像 XPath 一样找出节点,并修改值,然后输出新的Json. 很多人马上就会说,Jsonpath 啊. 是的 Jsonpath 确实能快速找出节点 ...
 - DRF内置过滤组件与排序组件结合使用
			
DRF内置过滤组件Filtering DRF提供了内置过滤组件Filtering,可以结合url路径的改变获取想要的数据,当然用户不可能在url访问路径中自己设置过滤条件,肯定是后端开发人员将前端页面 ...
 - [Kong 与 Konga与postgres数据库] 之 Kuberneres 部署
			
1.Kong的概述 Kong是一个clould-native.快速的.可扩展的.分布式的微服务抽象层(也称为API网关.API中间件或在某些情况下称为服务网格)框架.Kong作为开源项目在2015年推 ...
 - [netty4][netty-buffer]netty之池化buffer
			
PooledByteBufAllocator buffer分配 buffer分配的入口: io.netty.buffer.PooledByteBufAllocator.newDirectBuffer( ...
 - 聊聊MySQL常用的4种主从复制架构
			
目录 一主多从复制架构 多级复制架构 双主(Dual Master)复制架构 多源(Multi-Source)复制架构 如何优化主从延迟问题? 复制的4中常见架构有一主多从复制架构.多级复制架构.双主 ...
 - [源码解析] 当 Java Stream 遇见 Flink
			
[源码解析] 当 Java Stream 遇见 Flink 目录 [源码解析] 当 Java Stream 遇见 Flink 0x00 摘要 0x01 领域 1.1 Flink 1.2 Java St ...
 - MyBatis学习-使用Druid连接池将Maybatis整合到spring
			
目录 前言 什么是Druid连接池 Druid可以做什么? 导入库包 连接oracle 连接mysql 导入mybatis 导入druid 导入spring-jdbc包 导入spring包 导入spr ...