博客
关于我
小程序自定义导航栏
阅读量: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: 对换(替换)两条记录的同一个字段值
查看>>
mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
查看>>
MYSQL:基础——3N范式的表结构设计
查看>>
MYSQL:基础——触发器
查看>>
Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 参数--lock-tables浅析
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump 导出数据库中每张表的前n条
查看>>
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全(参数来源于mysql5.5.19源码)
查看>>
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqldump数据库备份无法进行操作只能查询 --single-transaction
查看>>
mysqldump的一些用法
查看>>
mysqli
查看>>
MySQLIntegrityConstraintViolationException异常处理
查看>>
mysqlreport分析工具详解
查看>>
MySQLSyntaxErrorException: Unknown error 1146和SQLSyntaxErrorException: Unknown error 1146
查看>>
Mysql_Postgresql中_geometry数据操作_st_astext_GeomFromEWKT函数_在java中转换geometry的16进制数据---PostgreSQL工作笔记007
查看>>