小程序开发-页面导航栏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 ...
随机推荐
- Java语言程序设计2019.9.16
1.Java的基本运行单位是类. 2.类是由方法和变量组成. 3.变量类型分为byte,int,double,long,short,boolean,char,float.java中整数类型默认的int ...
- Go语言入门系列(四)之map的使用
本系列前面的文章: Go语言入门系列(一)之Go的安装和使用 Go语言入门系列(二)之基础语法总结 Go语言入门系列(三)之数组和切片 1. 声明 map是一种映射,可以将键(key)映射到值(val ...
- JS pc端网页特效
offset offset翻译就是偏移量,可以使用他相关的属性可以动态的得到该元素的位置.大小等等 获得元素距离带有定位父元素的位置 获得元素自己的大小(宽度高度) 注 ...
- SonarQube 扫描 Java 代码
SonarQube 扫描 Java 代码 环境 需要提前安装好 SonarQube7.9,安装步骤见 Docker 安装 SonarQube 步骤 填写项目名 my_project 填写token名 ...
- 2020-07-05:tcp和udp的区别和应用场景。如何实现断点续传?
福哥答案2020-07-05: 区别:1.可靠性:tcp可靠.udp不可靠.2.连接性:tcp面向连接.udp无连接.3.报文:tcp字节流.udp面向报文.4.传输效率:tcp低.udp高.5.多点 ...
- JavaScript基础-01
1. Javascript是一门动态的.弱类型的.解释型的脚本语言 动态:数据类型在运行时决定 弱类型:变量数据的类型不是确定的,可以随意的进行改变: 解释型:相对编译型来说,编译型计算机在执行之前需 ...
- name 'xrange' is not defined
出现这个错误是因为examples使用的是Python2 在Python3中,移除了在Python2中的range, 并将 xrange 命名为 range 将代码中的xrange改为range就可以 ...
- PYTHON-错误-函数有返回值未接收导致替换不成功
#1.有返回值,没有赋值,替换不成功 cxj = 'guapi' cxj.replace(cxj,'2b') print(cxj) #2.有返回值,赋值,替换成功 cxj = 'guapi' cxj ...
- three.js 制作逻辑转体游戏(上)
今天郭先生又出来制作游戏了,最近有小伙伴要做一个逻辑转体小游戏,我怎么能不先来试试呢.玩法可以看上面的连接,下面附几张图.线案例请点击博客原文. 游戏规则不懂得可以看自行百度哈,其实玩起来还挺有难度的 ...
- RPC 框架 Dubbo 从理解到使用(一)
技术架构演变 单一应用架构 通俗地讲,"单体应用(monolith application)"就是将应用程序的所有功能都打包成一个独立的单元.当网站流量很小时,只需一个应用,将所有 ...