最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了。

首先新建一个顶部导航公用组件topnav,导航高度怎么计算?

  1. 1.wx.getSystemInfo wx.getSystemInfoSync 获取机器信息
  2. 2.screenHeight - windowHeight 计算标题栏高度
  3. 3.标题栏高度
  4. 'iPhone': ,
  5. 'iPhone X': ,
  6. 'android':

app.js

  1. //app.js
  2. App({
  3. onLaunch: function () {
  4. var that = this
  5. wx.getSystemInfo({
  6. success: function (res) {
  7. that.globalData.platform = res.platform
  8. let totalTopHeight =
  9. if (res.model.indexOf('iPhone X') !== -) {
  10. totalTopHeight =
  11. } else if (res.model.indexOf('iPhone') !== -) {
  12. totalTopHeight =
  13. }
  14. that.globalData.statusBarHeight = res.statusBarHeight
  15. that.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
  16. },
  17. failure() {
  18. that.globalData.statusBarHeight =
  19. that.globalData.titleBarHeight =
  20. }
  21. })
  22. })

还需更改配置app.json

  1. "window": {
  2. "backgroundTextStyle": "light",
  3. "navigationBarBackgroundColor": "#15ae67",
  4. "navigationBarTitleText": "微信小程序",
  5. "navigationBarTextStyle": "white",
  6. "navigationStyle": "custom"
  7. //自定义导航栏配置
  8. }

topnav.wxml

  1. <!--template.wxml-->
  2. <!-- 这是自定义组件的内部WXML结构 -->
  3. <view style="padding-top:{{someData.statusBarHeight+someData.titleBarHeight}}px">
  4. <view class="hh-header">
  5. <view class="status-bar" style="height:{{someData.statusBarHeight}}px"></view>
  6. <view class="title-bar" style="height:{{someData.titleBarHeight}}px">
  7. <view wx:if="{{isShowBack=='true'}}" class='hh-nav-back ico-back' bindtap='goback'></view>
  8. <view wx:if="{{isShowBack=='false'}}" class='hh-nav-back'></view>
  9. <view class="hh-title">{{innerTitle}}</view>
  10. <view class="hh-nav-right"></view>
  11. </view>
  12. </view>
  13. </view>
  14. <slot></slot>

topnav.json

  1. {
  2. "component": true
  3. }

topnav.js

  1. const app = getApp()
  2. Component({
  3. properties: {
  4. // 这里定义了innerText属性,属性值可以在组件使用时指定
  5. innerTitle: {
  6. type: String,
  7. value: '头部标题'
  8. },
  9. isShowBack: {
  10. type: String,
  11. value: "true"
  12. }
  13. },
  14. data: {
  15. // 这里是一些组件内部数据
  16. someData: {
  17. statusBarHeight: app.globalData.statusBarHeight,
  18. titleBarHeight: app.globalData.titleBarHeight
  19. }
  20. },
  21. methods: {
  22. // 这里是一个自定义方法
  23. goback: function () {
  24. wx.navigateBack({
  25. delta: ,
  26. })
  27. }
  28. }
  29. })

topnav.wxss

  1. .ico-back{
  2. width: 36rpx;
  3. height: 36rpx;
  4. background-size: contain;
  5. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAwRjFBMThDOEU1NDExRThCQUMxRTFBRUNDRDNCMkJEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAwRjFBMThEOEU1NDExRThCQUMxRTFBRUNDRDNCMkJEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDBGMUExOEE4RTU0MTFFOEJBQzFFMUFFQ0NEM0IyQkQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDBGMUExOEI4RTU0MTFFOEJBQzFFMUFFQ0NEM0IyQkQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7a0EjNAAAA80lEQVR42sTYOw7DIAwGYNxuPXHnTtygvUAuWalyE6WRMlBj7N/GEkOiCD4B4eHCzEUq3ljruPMe9fcstxcJOmGOqNNADcwR+SABs6SDOphrKqiHSZ3UGkwaSItJAY1gwkGjmFCQBRMGsmJCQB4MHOTFQEEIDAyEwkBASIwGRIrFr/XBZy03InpbQFJcFHW8Gu+2nnmUiFAM2daLzz/DVtHtaSc1DIX87SEo9MLoRkVsHS5U1OZqRkUeP0yo6APaMCrjCDuEyjrkq1GZ1yAVKvui2EXNuEqLqFnJBgk1LR3TQi08OWF1RqmyH8SAtB0yvgIMAGA41d9Fo4AZAAAAAElFTkSuQmCC);
  6. background-repeat: no-repeat;
  7. background-position-x: 20rpx;
  8. }
  9. .hh-header {
  10. position: fixed;
  11. top: ;
  12. width: %;
  13. background-color: #14ae66;
  14. z-index: ;
  15. }
  16. .hh-title{
  17. font-size: 38rpx;
  18. text-align: center;
  19. color: #fff;
  20. white-space: nowrap;
  21. overflow: hidden;
  22. text-overflow: ellipsis;
  23. }
  24. .title-bar {
  25. display: flex;
  26. justify-content: space-between;
  27. align-items: center;
  28. }
  29. .hh-nav-right{
  30. width: 116px;
  31. }
  32. .hh-nav-back{
  33. width: 116px;
  34.  
  35. }

这样组件就写好了  只需要在你每个页面里面用这个组件传不同的值就可以了。

index.wxml

  1. <component-topnav inner-title="{{title}}"></component-topnav> //显示返回按钮
 <component-topnav inner-title="我的管理" is-show-back="false"></component-topnav>  //不显示返回按钮

index.js

  1. //获取应用实例
  2. const app = getApp()
  3. Page({
  4. data: {
  5. motto: 'Hello World',
  6. userInfo: {},
  7. title:'自定义导航标题'
  8. },
  9. })

index.json

  1. {
  2. "usingComponents": {
  3. "component-topnav": "/pages/component/topnav"
  4. }
  5. }

微信小程序(18)-- 自定义头部导航栏的更多相关文章

  1. uniapp 小程序实现自定义底部导航栏(tarbar)

    在小程序开发中,默认底部导航栏很难满足实际需求,好在官方给出了自定义形式,效果如下: 话不多说,直接上代码 1.组件 custom-tarbar.vue文件 <template> < ...

  2. 初尝微信小程序2-Swiper组件、导航栏标题配置

    swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...

  3. 微信小程序开发之tab导航栏

    实现功能: 点击不同的tab导航,筛选数据 UI:   js: data:{ navbar: ['半月维保', '季度维保', '半年维保',"年度维保"],    //count ...

  4. 小程序 mpvue自定义底部导航栏

    1.在compontents新建文件放入 <template> <section class="tabBar-wrap"> <article clas ...

  5. 微信小程序点击顶部导航栏切换样式

    类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scro ...

  6. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  7. 微信小程序中自定义modal

    微信小程序中自定义modal .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text ...

  8. 微信小程序:自定义导航栏

    在小程序开发的时候会遇到一些页面不需要头部导航,或像淘宝的商品详情一样自定义的导航栏.那先要清楚这导航可不能写死,每种手机的导航都各不相同. 一.在app.json的window对象中定义导航的样式: ...

  9. 微信小程序:自定义组件

    为什么要学习自定义组件? 1.用上我自己的单词abc,我希望在页面中展示椭圆形的图片, 2.打开手机淘宝,假如现在要做一个企业级项目,里面有很多页面,首页存在导航模块,点击天猫,进入第二个页面,而第二 ...

随机推荐

  1. vue-cli 2.0搭建vue脚手架步骤

    1.安装node 检测版本node -v 2.安装webpack npm install webpack -g 检测版本 webpack -v 3.安装vue-cli npm install vue- ...

  2. mysql 8.0.13 zip windows 10安装

    1.下载安装包 https://dev.mysql.com/downloads/mysql/ 下载后解压到D:\Program Files\mysql-8.0.13-winx64 2.添加配置文件my ...

  3. Java泛型与集合笔记

    第一章 Java的泛型为了兼容性和防止代码爆炸,在编译成字节碼时会进行类型擦除,编译器自动添加代码做类型转换(用到List<Integer>的地方用Integer来做转换),自动做装箱拆箱 ...

  4. myeclipce注册

    今天提示MyEclipse Trial Expired,如何手动获取MyEclipse 注册码! 1.建立JAVA Project,随便命名,只要符合规则就行. 2.在刚刚建好的Project右击sr ...

  5. c#代码规则,C#程序中元素的命名规范

    俩种命名方法 1.Pascal 命名法,第一个字母大写其它字母小写Userid 2.Camel命名法,所有单第一方写大写,其它小写,骆峰命名法,userId C#程序中元素的命名规范项目名:公司名.项 ...

  6. BZOJ 2286: [Sdoi2011]消耗战 虚树

    Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的岛屿,而且他们已经没有足够多的能源维系战斗,我军 ...

  7. Android逆向之旅---静态分析技术来破解Apk

    一.前言 从这篇文章开始我们开始我们的破解之路,之前的几篇文章中我们是如何讲解怎么加固我们的Apk,防止被别人破解,那么现在我们要开始破解我们的Apk,针对于之前的加密方式采用相对应的破解技术,And ...

  8. 20180802-Java 方法

    Java 方法 下面的方法包含2个参数num1和num2,它返回这两个参数的最大值. /** 返回两个整型变量数据的较大值**/ public static int max(int num1,int ...

  9. Elven Postman

    Elven Postman Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  10. Hibernate入门学习笔记

    1.Hibernate是什么? 2.hibernate怎么配置? 3.SessionFactory是干什么的?有哪些方法经常用? 4.hibernate的现成的增删改查方法怎么使用?都有哪些方法?哪些 ...