博客
关于我
小程序自定义导航栏
阅读量: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

你可能感兴趣的文章
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MYSQL8.0以上忘记root密码
查看>>
Mysql8.0以上重置初始密码的方法
查看>>
mysql8.0新特性-自增变量的持久化
查看>>
Mysql8.0注意url变更写法
查看>>
Mysql8.0的特性
查看>>
MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
查看>>
MySQL8修改密码的方法
查看>>
Mysql8在Centos上安装后忘记root密码如何重新设置
查看>>
Mysql8在Windows上离线安装时忘记root密码
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>
mysql8的安装与卸载
查看>>
MySQL8,体验不一样的安装方式!
查看>>
MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
查看>>