微信小程序——自定义导航组件

一、先新建a页面 和 b页面，a页面可以跳转到b页面

二、创建导航组件

我这里是pages/nav/navigation文件

1、navigation.wxml  (myIcon 是我自己定义的图标组件，如果没有可以换成自己的view标签或者图片标签 ， 或者可以看上一篇创建图标组件的博文 https://blog.csdn.net/qq_39109182/article/details/101451616 )

<view class="navbar custom-class" style='height:{{navHeight}}px;background-color:{{bgColor}}'>
  <view wx:if="{{showNav}}" class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;background-color:rgba(255,255,255,.6)'>
        <myIcon class="fanhui"  name="myIconfanhui" color="{{iconColor}}" size='{{iconSize}}' bindtap="_navBack"  ></myIcon>
        <myIcon class="home"  name="myIconhome" color="#000" size='44rpx' bindtap="_toIndex" ></myIcon>   
  </view>
  <view class='navbar-title' style='top:{{navTop}}px'>
    {{pageName}}
  </view>
</view>

2、navigation.json 引入图标的组件

{
    "component": true,
    "usingComponents": {
        "myIcon": "../icon/icon"
    }
}

3、navigation.js

// components/navbar/index.js
const App = getApp();

Component({
    // options: {
    //     addGlobalClass: true,
    // },
    // externalClasses: ['custom-class'],
    /**
     * 组件的属性列表
     */
    properties: {
        // block:true,
        pageName: String,
        showNav: {
            type: Boolean,
            value: true
        },
        bgColor: {
            type: String,
            value: '#fff'
        },
        iconColor: {
            type: String,
            value: '#000'
        },
        iconSize:{
            type: String,
            value: '30rpx'            
        }
    },

    /**
     * 组件的初始数据
     */
    data: {

    },
    lifetimes: {
        attached: function () {
            this.setData({
                navHeight: App.globalData.navHeight,
                navTop: App.globalData.navTop
            })
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        //回退
        _navBack: function () {
            wx.navigateBack({
                delta: 1
            })
        },
        //回主页
        _toIndex: function () {
            wx.redirectTo({
                url: '/pages/index/index'
            })
        },        
        // _toIndex: function () {
        //     wx.switchTab({
        //         url: '/pages/index/index'
        //     })
        // },
    }
})

4、navigation.wxss

.fanhui{padding-left:30rpx;}
.home{padding-right:30rpx}
.navbar {width: 100%;overflow: hidden;position: relative;top: 0;left: 0;z-index: 10;flex-shrink: 0;}
.navbar-title {width: 100%;box-sizing: border-box;padding-left: 115px;padding-right: 115px;height: 32px;line-height: 32px;text-align: center;position: absolute;left: 0;z-index: 10;color: #333;font-size: 16px;font-weight: bold;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.navbar-action-wrap {display: -webkit-flex;display: flex;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;position: absolute;left: 10px;z-index: 11;line-height: 1;padding-top: 4px;padding-bottom: 4px;}
.navbar-action-group {border: 1px solid #f0f0f0;border-radius: 20px;overflow: hidden;}
.navbar-action_item {padding: 3px 0;color: #333;}
.navbar-action-group .navbar-action_item {border-right: 1px solid #f0f0f0;padding: 3px 14px;}
.navbar-action-group .last {border-right: none;}

 三、全局配置 app.js  （算导航的高度 定义全局变量globalData）

App({

onLaunch: function (options) {
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
        success: res => {
            //导航高度
            let statusBarHeight = res.statusBarHeight,
                navTop = menuButtonObject.top,
                navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
            this.globalData.navHeight = navHeight;
            this.globalData.navTop = navTop;
            this.globalData.windowHeight = res.windowHeight;
        },
        fail(err) {
            console.log(err);
        }
    })

},
globalData: {
    windowHeight:null
},

全局配置 app.json 

{
    "pages": [
        "pages/index/index",
        "pages/nav/nav",
        "pages/nav/navigation"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black",
        "navigationStyle": "custom"
    },
    "sitemapLocation": "sitemap.json",
    "usingComponents": {
        "navtab": "pages/nav/navigation",
        "myIcon": "pages/icon/icon"
    }
}

四、a和b页面引用

a.wxml

<navtab  page-name="a页面" iconColor='red'></navtab>

  a.json

{
    "usingComponents": {
        "navtab": "../nav/navigation"
    }

}

a.js

// pages/a/a.js
var app = getApp();
Page({

    onLoad: function (options) {
        console.log(app.globalData.helloFromApp); 
        console.log(app.globalData.windowHeight)
    },

})

b页面也是同a一样

运行效果