小程序是越来越开放了，微信版本 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. 【树形DP】【P1364】医院放置

    传送门 Description 设有一棵二叉树,如图: 其中,圈中的数字表示结点中居民的人口.圈边上数字表示结点编号,现在要求在某个结点上建立一个医院,使所有居民所走的路程之和为最小,同时约定,相邻接 ...

  2. java.lang包学习（转自微学苑）

    Java语言包(java.lang)定义了Java中的大多数基本类,由Java语言自动调用,不需要显示声明.该包中包含了Object类,Object类是整个类层次结构的根结点,同时还定义了基本数据类型 ...

  3. STL之五：set/multiset用法详解

    集合 转载于:http://blog.csdn.net/longshengguoji/article/details/8546286 使用set或multiset之前,必须加入头文件<set&g ...

  4. 使用 Rational AppScan 保证 Web 应用的安全性，第 2 部分: 使用 Rational AppScan 应对 Web 应用攻击

    1 当前 Web 安全现状 互联网的发展历史也可以说是攻击与防护不断交织发展的过程.目前,全球因特网用户已达 13.5 亿,用户利用网络进行购物.银行转账支付和各种软件下载,企业用户更是依赖于互联网构 ...

  5. [LeetCode] 17. Letter Combinations of a Phone Number ☆☆

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  6. LightOJ 1218 概率水题（几何分布）

    题意:给你一个n面骰子,问你投出所有面需要的次数的期望值是多少. 题解:放在过去估计秒解,结果现在自己想好久,还查了下,有人用极限证明...实际上仔细想想这种情况投出与前面不一样的概率p的倒数就是次数 ...

  7. zk-web

    Ref:https://github.com/qiuxiafei/zk-web zk-web是一个用clojure with noir and boostrap写的Zookeeper WEB UI管理 ...

  8. freemarker中空值“”，null值的判断

    原文:http://zhousheng193.iteye.com/blog/1319772 <#if letVo.manageScore!=""> ${html('${ ...

  9. 彻底解决_OBJC_CLASS_$_某文件名", referenced from:问题

    最近在使用静态库时,总是出现这个问题.下面总结一下我得解决方法: 1. .m文件没有导入    在Build Phases里的Compile Sources 中添加报错的文件 2. .framewor ...

  10. Desert King(POJ2728+最优比率生成树+二分）

    题目链接:http://poj.org/problem?id=2728 题目: 题意:求一颗生成树,使得费用与距离的比值最小,其中距离等于两点之间的平面欧拉距离,费用为z坐标之差. 思路: 由上图我们 ...