微信小程序自定义navigationBar标题栏
小程序默认使用的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标题栏的更多相关文章
- 微信小程序——自定义导航栏
微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
- 微信小程序-自定义底部导航
代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序自定义tabbar的实现
微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...
- 微信小程序 自定义导航组件 nav头部 全面屏设计
nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
- 微信小程序自定义Tabber,附详细源码
目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...
随机推荐
- sublime text2 安装及使用教程
1.下载安装包地址:https://www.sublimetext.com/2 2.安装,一直点下一步就好,将下列选项打钩,这样文件右键就可以直接用sublime text2打开 3.新建一个html ...
- jquery 3.4.0
jQuery 3.4.0 的更新内容主要是错误修复和功能改进,列举部分如下: 针对 .width 和 .height 的性能改进 支持 nonce 和 nomodule 针对 Radio 元素新增事件 ...
- https多网站1个IP多个SSL证书的Apache设置办法
这些天接触了解SSL证书后,写了一篇<申请免费的SSL证书,开通https网站>博文,其中简单记录了Apache的设置,后来又涉及到多个域名.泛域名解析.通配符SSL证书.单服务器/多服务 ...
- 使用pdf.js预览实现读取服务器外部文件
不知道大家使用百度网盘的文件预览功能,f12看过控制台没有. 发现百度网盘使用的预览文件功能全是基于开源pdf .js的 接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件 ...
- Oracle去除重复(某一列的值重复),取最新(日期字段最新)的一条数据
转自 : http://blog.csdn.net/nux_123/article/details/45037719 问题:在项目中有一张设备检测信息表DEVICE_INFO_TBL, 每个设备每天都 ...
- Exp 8 Web基础
Exp 8 Web基础 20154305 齐帅 一.实践要求: (1).Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. ...
- mpvue 初体验之改写车标速查小程序
前文 说到我开发了一个简单的小程序叫做 车标速查(代码以及二维码详见 这里),本文简单讲讲如何将这个小程序转为 mpvue 开发(最终 成果 ) mpvue 官网的 文档 真的是非常简单,不,应该说是 ...
- servlet从mysql中取数据时出现的汉字编码问题
取出的汉字都是问号 之后根据网友提示在输出之前对response进行编码设置 正常显示
- 3、MHC主要组织相容性复合体
主要组织相容性复合体 (major histocompatibility complex MHC) 位于脊椎动物某对染色体上紧密连锁的基因群,其编码的蛋白是主要组织相容性抗原,是移植排斥反应的主要抗原 ...
- 转:酷我音乐API
酷我音乐API 本次分析的是酷我音乐API 歌曲搜索API:http://search.kuwo.cn/r.s?all={0}&ft=music&itemset=web_2013&am ...