小程序自定义导航栏-白红宇

小程序自定义导航栏

阅读量：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 select， from ，join ，on ，where groupby,having ,order by limit的执行顺序和书写顺序