小程序是越来越开放了，微信版本 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. JS传递中文参数出现乱码的解决办法

    一.window.open() 乱码: JS中使用window.open("url?param="+paramvalue)传递参数出现乱码,提交的时候,客户端浏览器URL中显示参数 ...

  2. Azure Pipelines

    https://docs.microsoft.com/en-us/azure/devops/pipelines/?view=vsts

  3. Tomcat免安装版+Eclipse配置

    Tomcat是目前比较流行的开源且免费的Web应用服务器,在我的电脑上第一次安装Tomcat,再经过网上教程和自己的摸索后,将这个过程 重新记录下来,以便以后如果忘记了可以随时查看. 注意:首先要明确 ...

  4. 【Android】完善Android学习（三：API 3.0）

    备注:之前Android入门学习的书籍使用的是杨丰盛的<Android应用开发揭秘>,这本书是基于Android 2.2API的,目前Android已经到4.4了,更新了很多的API,也增 ...

  5. 数据结构：Rope-区间翻转

    BZOJ1269 上一篇文章介绍了Rope的简单应用,这里多了一个操作,区间翻转 同时维护一正一反两个rope……反转即交换两个子串 下面给出代码: #include<cstdio> #i ...

  6. LightOJ 1062 - Crossed Ladders 基础计算几何

    http://www.lightoj.com/volume_showproblem.php?problem=1062 题意:问两条平行边间的距离,给出从同一水平面出发的两条相交线段长,及它们交点到水平 ...

  7. HTML5实体刮刮乐效果！

    先来看DEMO吧,http://codepen.io/jonechen/pen/ZOyxmq HTML部分: <div class="msg"> <a href= ...

  8. 【LA】5135 Mining Your Own Business

    [算法]点双连通分量 [题解]详见<算法竞赛入门竞赛入门经典训练指南>P318-319 细节在代码中用important标注. #include<cstdio> #includ ...

  9. python学习笔记（三）之变量和字符串

    在其他语言中,变量就是有名字的存储区,可以将值存储在变量中,也即内存中.在Python中略有不同,python并不是将值存储在变量中,更像是把名字贴在值上边.所以,有些python程序员会说pytho ...

  10. this指针再解

     this.new.call和apply的相关问题 讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本篇打算换一 ...