小程序默认使用的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. Swift 加载 xib 崩溃问题

    新版本用 Swift开发 遇到的坑 解决方法

  2. 20175229张智敏 Arrays和String单元测试

    Arrays和String单元测试 1.具体要求: 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split A ...

  3. 今天我给你们推荐一本书《Linux就该这么学》!!!

    本书是由全国多名红帽架构师(RHCA)基于最新Linux系统共同编写的高质量Linux技术自学教程,极其适合用于Linux技术入门教程或讲课辅助教材,目前是国内最值得去读的Linux教材,也是最有价值 ...

  4. temp--内蒙农信(环境)

    规章制度篇: 1, 内蒙农信办公地址:    呼和浩特市赛罕区内蒙古自治区农村信用社联合社(陶利街) 农金大厦1201室. 2, 电子版蓝底照片(办饭卡,自己充钱) , 行里面吃饭标准  早餐8元.午 ...

  5. 大数据项目测试<二>项目的测试工作

    大数据的测试工作: 1.模块的单独测试 2.模块间的联调测试 3.系统的性能测试:内存泄露.磁盘占用.计算效率 4.数据验证(核心) 下面对各个模块的测试工作进行单独讲解. 0. 功能测试 1. 性能 ...

  6. Linux 目录结构详解

    Linux目录详解 Linux目录详解(RHEL5.4) 由于linux是开放源代码,各大公司和团体根据linux的核心代码做各自的操作,编程.这样就造成在根下的目录的不同.这样就造成个人不能使用他人 ...

  7. Equal 路由类

    1.Route 原型 class Route { /* 获取请求路径和查询字符串 */ /* 获取模块.控制器.动作名称 */ /* 获取 URI 参数 */ }

  8. 【Golang】如何统一处理HTTP请求中的异常捕获

    最近写GOLANG项目,不使用框架,路由选择httprouter 现在想实现一个需求:在不修改httprouter源码的前提下,对所有注册的路由handle进行异常捕获. 大家都知道golang使用p ...

  9. 获取列表菜单的选项值与选项以后的VALUE

    <html> <body> <select id="izan" name="" onchange='izzzz()'> &l ...

  10. <笔记>三码合一

    讲求三码合一,何为三码合一?(这里我用UTF8讲例子) 就是页面编码,文档编码,数据库编码要统一一种格式,切记不可有的是GBK,有的是UFT8 页面编码:也就是用header 函数申明:header( ...