博客
关于我
小程序自定义导航栏
阅读量: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 表的操作
查看>>
mysql 视图,视图更新删除
查看>>
MySQL 触发器
查看>>
mysql 让所有IP访问数据库
查看>>
mysql 记录的增删改查
查看>>
MySQL 设置数据库的隔离级别
查看>>
MySQL 证明为什么用limit时,offset很大会影响性能
查看>>
Mysql 语句操作索引SQL语句
查看>>
MySQL 误操作后数据恢复(update,delete忘加where条件)
查看>>
MySQL 调优/优化的 101 个建议!
查看>>
mysql 转义字符用法_MySql 转义字符的使用说明
查看>>
mysql 输入密码秒退
查看>>
mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
查看>>
mysql 通过查看mysql 配置参数、状态来优化你的mysql
查看>>
mysql 里对root及普通用户赋权及更改密码的一些命令
查看>>
Mysql 重置自增列的开始序号
查看>>
mysql 锁机制 mvcc_Mysql性能优化-事务、锁和MVCC
查看>>
MySQL 错误
查看>>
mysql 随机数 rand使用
查看>>