小程序是越来越开放了，微信版本 6.6.0可以自定义导航？

先了解下app.json中window配置navigationStyle属性，即导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮

"window":{

    "navigationBarTitleText": "test",

    "navigationBarTextStyle": "black",

    "navigationBarBackgroundColor": "#aa154e",

    "enablePullDownRefresh": true,

    "backgroundColor": "#aa154e",

    "backgroundTextStyle": "dark",

    "onReachBottomDistance":15,

    "navigationStyle": "custom"

  }

如果设置了"navigationStyle": "custom"，则在真机上"navigationBarTitleText": "test"是不起作用的，并且小程序是全屏展示的，因此除了右上角胶囊状的按钮，导航栏处我们可以自由发挥

微信小程序-如何自定义导航栏（navigationStyle）？的更多相关文章

  1. 微信小程序：自定义导航栏

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

  2. 微信小程序之自定义导航栏（可实现动态添加）以及swiper（swiper-item）实现自动切换，导航标题也跟着切换

    <view class="movie-container"> <!-- 导航栏 --> <view > <scroll-view scro ...

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

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

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

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

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

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

  6. 微信小程序之顶部导航栏

    wxml: <!--导航条--><view class="navbar"> <text wx:for="{{navbar}}" d ...

  7. 微信小程序添加底部导航栏

    修改 app.json 文件即可 "tabBar": { "selectedColor": "#1296db", "list&qu ...

  8. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  9. 微信小程序中自定义modal

    微信小程序中自定义modal .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text ...

随机推荐

  1. 2017-7-18-每日博客-关于Linux下的history的常用命令.doc

    History history命令可以用来显示曾执行过的命令.执行过的命令默认存储在HOME目录中的.bash_history文件中,可以通过查看该文件来获取执行命令的历史记录.需要注意的是.bash ...

  2. 关闭nginx日志

    在nginx.conf中将 access_log /dev/null; error_log /dev/null;

  3. java线程的基本概念

    进程和线程 进程的诞生 操作系统中有2个任务A,B,任务A先执行,执行到一半需要io,因此要大量时间,在这个时间段内cpu是空闲的,浪费了资源,于是就有进程,当A暂时无法利用cpu,但是又不能销毁时, ...

  4. [洛谷P3628] [APIO2010]特别行动队

    洛谷题目链接:[APIO2010]特别行动队 题目描述 你有一支由 n 名预备役士兵组成的部队,士兵从 1 到 \(n\) 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑,同一支特别行动 ...

  5. 【设计模式】 模式PK：门面模式VS中介者模式

    1.概述 门面模式为复杂的子系统提供一个统一的访问界面,它定义的是一个高层接口,该接口使得子系统更加容易使用,避免外部模块深入到子系统内部而产生与子系统内部细节耦合的问题.中介者模式使用一个中介对象来 ...

  6. ES6新增的let与const

    1.const 声明常量,一旦声明必须立马赋值,否则报错 const PI = 3.14 const PI; //报错:Uncaught SyntaxError: Missing initialize ...

  7. C语言分割字符串函数strtok

    在编程过程中,有时需要对字符串进行分割.而有效使用这些字符串分隔函数将会给我们带来很多的便利. 下面我将在MSDN中学到的strtok函数做如下翻译. strtok :在一个字符串查找下一个符号 ch ...

  8. mssql注入中的储存用法删除与恢复

    删除: use master exec sp_dropextendedproc 'xp_cmdshell' exec sp_dropextendedproc 'xp_enumgroups' exec ...

  9. python开发第二十六天CMDB

    概要: 1.采集资产 2.API 一.资产采集 1.采集方式的配置 2.插件的定制 3.测试模式 4.错误日志(必须是行级的详细错误信息) 5.汇报数据-->遵循资产的唯一性 (1)只针对物理机 ...

  10. TCP之Nagle算法与延迟ACK

    (一)Nagle算法 为了减少网络中小分组的数目,减少网络拥塞的情况.Nagle算法要求在一条TCP连接上最多只能有一个未被确认的未完成小分组,在该分组ACK到达之前不能够发送其他的小分组,发送端需要 ...