博客
关于我
小程序自定义导航栏
阅读量:554 次
发布时间:2019-03-09

本文共 2411 字,大约阅读时间需要 8 分钟。

文章目录

一. 微信自带的导航栏

小程序有自带的导航栏,可以通过app.json中的在这里插入图片描述

window进行配置,在此为全局的顶部导航。

二.自定义导航栏

1.设置custom

若需要自定义导航栏,即实现不同页面有不同标题,或者不同的顶部导航栏样式,则首先需要在app.json中的window添加"navigationStyle": "custom"

也可以把其他的navigationBar字段给删除,直接加custom在这里插入图片描述

2.component

接着可以通过自定义组件components来自定义。

在小程序的根目录(即与app.json文件夹同在的那个文件夹)创建components文件夹。之后创建组件的名称文件夹(在我这里用的是nav)。
鼠标右键点击nav,点击创建component,即可以生成以下四个文件。(这四个文件用于写组件的样式等

在这里插入图片描述

nav.json

{     "component": true,  "usingComponents": {   }}

nav.js

// components/nav/nav.jsComponent({     properties: {       title: {   			// 设置标题      type: String,      value: ''	    },    cover_state: {   	 // 控制页面padding-top      type: Boolean,      value: false    },    show_bol: {   			// 控制返回箭头是否显示      type: Boolean,      value: true    },    my_class: {   			// 控制样式      type: Boolean,      value: false    }  },  /* 组件的初始数据 */  data: {       type: "组件",    bar_Height: wx.getSystemInfoSync().statusBarHeight    		// 获取手机状态栏高度  },  /* 组件的方法列表 */  methods: {       goBack: function () {   					// 返回事件      console.log("退后")      wx.navigateBack({           delta: 1,      })         }  }})

nav.html

{ {title}}
/* components/nav/nav.wxss *//* 顶部导航 */.status-bar {     width: 100%;  z-index: 99999;  position: fixed;  top: 0;  }.goBack{     position: absolute;  top: 15rpx;  font-size:12pt;}.goBack image{     width: 40rpx;  height: 40rpx;  padding: 12rpx 20px 0 30rpx;}.tabar {     display: flex;  justify-content: center;  background-color: rgba(0, 0, 0, 0); }.tabar2{     background: transparent !important;}.tabar2 text{     color: #fff !important;  font-weight: lighter !important;}.tabar text {     height: 44px;  line-height: 44px;  padding: 0 30rpx;  color: white;  font-size: 12pt;  font-weight: bold;}.tabar .active {     color: #fff;}

3.引用组件

写好组件的四个文件之后,就是引用阶段。

在需要使用自定义导航栏的页面**.json加入组件路径,注意这里的路径要根据你自己的实际情况**去写。

"usingComponents": {     "component":"../../components/nav/nav"  }
  • 若想要获取状态栏的高度作为component外面的盒子的padding-top,
statusBarHeight 状态栏的高度
screenHeight 屏幕高度

可以在页面.js中用wx.getSystemInfoSync().statusBarHeight 获取。

data:{    bar_Height: wx.getSystemInfoSync().statusBarHeight widnowH : wx.getSystemInfoSync().screenHeight, }

在页面.wxml写入:

这样的话,就有一个自适应手机型号高度的导航栏

在这里插入图片描述
如此一来,便可以通过修改nav.wxml来修改导航栏上的东西了。
在这里插入图片描述

在这里插入图片描述

  • 也可以不获取状态栏高度。这样的话,下面的元素就会直接往上移,就可以实现这种效果
    在这里插入图片描述

在这里插入图片描述

三.参考资料

https://blog.csdn.net/qq_33744228/article/details/83656588

你可能感兴趣的文章
MySQL Server 5.5安装记录
查看>>
mysql server has gone away
查看>>
mysql skip-grant-tables_MySQL root用户忘记密码怎么办?修改密码方法:skip-grant-tables
查看>>
mysql slave 停了_slave 停止。求解决方法
查看>>
MySQL SQL 优化指南:主键、ORDER BY、GROUP BY 和 UPDATE 优化详解
查看>>
MYSQL sql语句针对数据记录时间范围查询的效率对比
查看>>
mysql sum 没返回,如果没有找到任何值,我如何在MySQL中获得SUM函数以返回'0'?
查看>>
mysql sysbench测试安装及命令
查看>>
mysql Timestamp时间隔了8小时
查看>>
Mysql tinyint(1)与tinyint(4)的区别
查看>>
MySQL Troubleshoting:Waiting on query cache mutex
查看>>
mysql union orderby 无效
查看>>
mysql v$session_Oracle 进程查看v$session
查看>>
mysql where中如何判断不为空
查看>>
MySQL Workbench 使用手册:从入门到精通
查看>>
MySQL Workbench 数据库建模详解:从设计到实践
查看>>
MySQL Workbench 数据建模全解析:从基础到实践
查看>>
mysql workbench6.3.5_MySQL Workbench
查看>>
MySQL Workbench安装教程以及菜单汉化
查看>>
MySQL Xtrabackup 安装、备份、恢复
查看>>