小程序开发-页面导航栏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 ...
随机推荐
- Nexus2 上传文件
通过管理界面上传 上传文件 hello-nexus.jar 登录 nexus2 选择第三方库 填写文件信息,完成文件上传 在索引页刷新,可以看到上传的文件 服务器上,文件的存放路径是 sonatype ...
- ACL权限管理 学习
#查看权限 getfacl 文件名 例子:getfacl test 结果:# file: test# owner: root# group: rootuser::rw-group::r-xother: ...
- 用 cgo 生成用于 cgo 的 C 兼容的结构体
假设(并非完全假设,这里有 demo)你正在编写一个程序包,用于连接 Go 和其它一些提供大量 C 结构体内存的程序.这些结构可能是系统调用的结果,也可能是一个库给你提供的纯粹信息性内容.无论哪种情况 ...
- Visual Studio Code中设置sftp同步代码到服务器
## **前言** - 绝对的大佬才会直接在Linux下用vim写代码,我等小白只能通过IDE来了,所以将代码同步到服务器上就很重要了.使用vs code设置好sftp就可以实现这一功能. - 设置之 ...
- 为什么你的 64-bit 程序可能占用巨大的虚拟空间
出于很多目的,我从最新的 Go 系统内核开发源码复制了一份代码,在一个正常的运行环境中构建(和重新构建)它,在构建版本基础上周期性地重新构建 Go 程序.近期我在用 ps 查看我的一个程序的内存使用情 ...
- Web前端性能优化,应该怎么做?
摘要:本文将分享一些前端性能优化的常用手段,包括减少请求次数.减小资源大小.各种缓存.预处理和长连接机制,以及代码方面的性能优化等方面. base64:尤其是在移动端,小图标可以base64(webp ...
- 【深度学习】:一门入门3D计算机视觉
一.导论 目前深度学习已经在2D计算机视觉领域取得了非凡的成果,比如使用一张图像进行目标检测,语义分割,对视频当中的物体进行目标跟踪等任务都有非常不错的效果.传统的3D计算机视觉则是基于纯立体几何来实 ...
- Salesforce学习笔记之Actions and Recommendations(续)
上次对这个Actions and Recommendations进行了初步研究,因为一些问题没有得到很好的解决,又花了很多时间,终于得到了一个比较好的解决方案.小结一下. 1. 生成Actions a ...
- 实战开发,使用 Spring Session 与 Spring security 完成网站登录改造!!
上次小黑在文章中介绍了四种分布式一致性 Session 的实现方式,在这四种中最常用的就是后端集中存储方案,这样即使 web 应用重启或者扩容,Session 都没有丢失的风险. 今天我们就使用这种方 ...
- linux 查看系统页大小
X86: [root@wangjq ~]# getconf PAGESIZE ARM: root@controller:~# getconf PAGESIZE