小程序默认使用的navigationBar只能设置颜色、文字,左侧返回按钮也是不可改变的,若要实现下方效果有解决方案,但是也有一定的问题。

1、更改app.json

  "window": {
"navigationStyle": "custom"
},

2、自定义标题栏

使用custom模式后,页面将延展到整个屏幕包括设备标题栏,有需要的话要在app.js中获取设备的标题栏高度,页面中再去使用这个值

/app.js
wx.getSystemInfo({
success: function(res) {
this.globalData.statusBarHeight = res.statusBarHeight
}
})

接下来,就可以敲页面了,标题栏固定在顶部就可以了,想怎么写怎么写

4、存在的问题
1、下拉刷新时整个页面移动,包括标题栏,因为标题栏是在页面里的(安卓手机)
2、右上角的胶囊是一直存在的,要根据胶囊位置调整想要的效果
3、custom模式是全局的,不能单个页面使用,就意味每个页面都要自定义标题栏,建议使用模板

微信小程序自定义navigationBar标题栏的更多相关文章

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

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  2. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  3. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  4. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  5. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  6. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  7. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

  8. 微信小程序自定义Tabber,附详细源码

    目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...

  9. 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况

    背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...

随机推荐

  1. 图解HTTP第九章

    基于 HTTP 的功能追加协议 1>HTTP 的瓶颈有哪些: 2>消除 HTTP 瓶颈的 SPDY,缩短 Web 页面的加载时间 [1]SPDY 的设计与功能 [2]SPDY 消除 Web ...

  2. 做seo应该如何选择网站程序?

    网站程序:(具体网站案例,可在官网看到)绝大多数情况下,我们将做的网站有以下几种1.个人博客,推荐的程序Wordpress(php的程序,比较强大),Zblog(asp的程序,比较简单)2.门户网站( ...

  3. (转)RandomAccessFile类使用详解

    1.RandomAccessFile特点   RandomAccessFile是java Io体系中功能最丰富的文件内容访问类.即可以读取文件内容,也可以向文件中写入内容.但是和其他输入/输入流不同的 ...

  4. Lua5.2&Lua5.3中废除的方法

    Lua5.2和Lua5.3中居然把 table.getn() 废除了, webAdd = {"QQ", "BaiDu", "SMW"} fo ...

  5. JAVA 8 主要新特性 ----------------(五)Lambda方法引用与构造器引用

    一.Lambda方法引用 当要传递给Lambda体的操作,已经有实现的方法了,可以使用方法引用!(实现抽象方法的参数列表,必须与方法引用方法的参数列表保持一致!) 方法引用: 使用操作符 “::” 将 ...

  6. gensim自然语言处理

    参考代码 ChineseClean_demo1.py: # -*- coding:utf-8 -*- import xlrd import xlwt ''' python3.4 ''' # file ...

  7. python turtle库

    turtle库初步 先看 https://www.cnblogs.com/chy8/p/9448606.html 一 turtle库介绍 turtle乌龟 import turtle from tur ...

  8. [leetcode268]Missing Number

    Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...

  9. GitHub和Git(待补充)

    仓库(Repository):存放项目代码,每个项目对应一个仓库. 收藏(Star) 复制(Fork):克隆并生成新的仓库,from某某.以此为基础修改或应用项目.pull request,源仓库会查 ...

  10. 日程管理Demo4中的bug

    Demo4的github地址 模拟器有点慢之后贴图 https://git.oschina.net/annie_guo/study.git 在登陆注册界面中java的提示语言(Login.java) ...