小程序之自定义头部导航栏

​

现在小程序都支持自定义头部导航栏了，所以我们也会有这种需求~跟我一起入手吧～

1.了解头部导航栏构成

导航栏高度 包含两个部分：工具栏(1)和title栏(2)， 工具栏的高度一般是固定的20px，title栏的高度需要计算.

2.计算title栏高度

需要计算title-bar的高度

在 默认导航栏 & 无底部tab栏 的情况下，使用wx.getSystemInfoSync获取手机信息，可以看到两项信息:

• screenHeight 屏幕高度，单位px

• windowHeight 可使用窗口高度，单位px

这种情况下，二者的差值就是默认的导航栏的高度, 但是在设置了"navigationStyle": "custom"之后，二者的值是一样的了

在app.js中获取statusBarHeight的高度

//app.js
App({  
    onLaunch: function (options) {    
        //获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）    
        this.globalData.height = wx.getSystemInfoSync().statusBarHeight;  
    },  
    globalData: {    
        height: 0,  
    }
})

在app.wxss中设定单个页面的样式

/**app.wxss**/
pages {  
    position: relative;  
    z-index: 9999998;  
    background: #fff;
}

3.编写自定义组件

在component中自定义navbar组件，组件目录如下：

navbar/index.wxml文件

<view class='nav-wrap' style='height: {{height*2 + 20}}px;'>    
    <!-- 导航栏 中间的标题 -->  
    <view class='nav-title' style='line-height: {{height*2 + 44}}px;'>{{navbarData.title}}</view>
      <!-- 导航栏  左上角的返回按钮 和home按钮-->  
    <view class='nav-left'>        
    <!--  其中showCapsule控制左上角按钮的显示隐藏，首页不显示 showBack 是否显示返回按钮 showHome 是否显示首页按钮 -->
    <view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>      
        <view bindtap='_navback' wx:if='{{navbarData.showBack}}'>      
          <image src='/images/back.png' mode='aspectFill' class='back-pre'></image>    
        </view>      
        <view class='navbar-v-line' wx:if='{{navbarData.showHome}}'></view>    
        <view bindtap='_backhome' wx:if='{{navbarData.showHome}}'>       
、         <image src='/images/home.png' mode='aspectFill' class='back-home'></image>   
        </view>  
     </view>  
    </view>
</view>

navbar/index.js文件

const app = getApp()
Component({  
    properties: {    
        navbarData: {   
            //navbarData   由父页面传递的数据，变量名字自命名      
            type: Object,      
            value: {},      
            observer: function (newVal, oldVal) { }    
            }  
        },  
        data: {    
            height: '',    //默认值  默认显示左上角    
            navbarData: {      
                showCapsule: 1,      
                showBack:1,      
                showHome:1    
            }  
        },  
        attached: function () {    
                // 定义导航栏的高度   方便对齐    
                this.setData({      
                    height: app.globalData.height    
                })  
        },  
        methods: {    
            // 返回上一页面    
            _navback() {      
                wx.navigateBack()    
            },    
            //返回到首页    
            _backhome() {      
                wx.switchTab({        
                    url: '/pages/index/index',      
                })    
        }  
}})

navbar/index.json文件（自定义组件必须）：

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

4.如何引入使用该自定义组件？

在page/index/index.wxml中

<!-- 引入自定义组价。'navbar-data'中navbar是自定义名字，决定了组件中'navbarData'的名字 -->
<view class="home">    
    <nav-bar navbar-data='{{nvabarData}}'></nav-bar>    
    <image src="/images/home-bg.png" class="home-bg"></image>
</view>

在page/index/index.js中

//index.js
//获取应用实例
const app = getApp()​
Page({  
    data: {    
        // 组件所需的参数    
        nvabarData: {      
            showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示      
            showBack:1,      
            showHome:1,      
            title: '首页', //导航栏 中间的标题   
         },    
        height: app.globalData.height * 2 + 20,  
    },  
    onLoad() {    
        console.log(this.data.height)  
}})

在page/index/jindex.json

{  
    "navigationStyle": "custom",  
    "usingComponents": {    
        "nav-bar": "/component/navbar/index"  
}}

你学会了吗？有任何疑问都可以联系我哦~