Applet daily – head navigation component of custom component

Time:2020-10-31

Head navigation unit

With a small house and return key, the background color can be set, the title text color can be set, the capsule background color can be set, the border color can be set, which is a more comprehensive, is currently in practical application, which can be referred to~

headerNabvar.js
const app = getApp();
Component({
    properties: {
        Navbardata: {// navbardata the data passed by the parent page
            type: Object,
            value: {},
            observer: function (newVal, oldVal) { }
        }
    },
    data: {
        Haveback: true, // whether there is a return button; true has a false button; if you enter from the sharing page, there is no return button
        Statusbarheight: 0, // status bar height
        Navbarheight: 0, // top navigation bar height
        Navbarbtn: {// capsule location information
            height: 0,
            width: 0,
            top: 0,
            bottom: 0,
            right: 0
        }
    },
    //Wechat 7.0.0 support wx.getMenuButtonBoundingClientRect () get capsule button height
    attached: function () {
        let statusBarHeight =  app.globalData.systeminfo . statusbarheight // status bar height
        let headerPosi =  app.globalData.headerBtnPosi  //Capsule location information
        /**
         * wx.getMenuButtonBoundingClientRect () coordinate information is based on the upper left corner of the screen
         *Menu key width: 87
         *Menu key height: 32
         *Left border coordinate of menu button: 278
         *Upper boundary coordinates of menu keys: 26
         *Right border coordinate of menu button: 365
         *Menu button lower boundary coordinates: 58
         */
        Let btnposi = {// the actual position of the capsule. The coordinate information is not the origin of the upper left corner
            height: headerPosi.height || 32,
            width: headerPosi.width || 87,
            top: ( headerPosi.top  ||26) - statusbarheight, // capsule top - height of status bar
            bottom:  ( headerPosi.bottom  || 58) - ( headerPosi.height  ||32) - statusbarheight, // capsule bottom - capsule height - status bar height (the actual bottom of capsule is the length from the bottom of navigation bar)
            right:  app.globalData.systeminfo .screenWidth - ( headerPosi.right  ||365) // screen width - capsule right
        }
        let haveBack;
        If (getcurrentpages(). Length = = = 1) {// when there is only one page, and it is entered from the shared page
            haveBack = false;
        } else {
            haveBack = true;
        }
        this.setData({
            Haveback: haveback, // gets whether the applet entered through sharing
            // haveBack: true,
            statusBarHeight: statusBarHeight,
            navbarHeight: ( headerPosi.bottom  || 58) +  btnPosi.bottom , // capsule bottom + capsule bottom
            navbarBtn: btnPosi
        })
    },
    methods: {
        _goBack: function (event) {
                wx.navigateBack({
                    delta: 1,
                    success() {
                        
                    }
                });
        },
        _goHome: function (event) {           
                wx.reLaunch({
                    url: '/pages/index/index'
                })
        }
    }
})

headerNabvar.json

{
    "component": true,
    "usingComponents": {}
}
headerNabvar.wxml
<! -- because Android is compatible with cover view, change back to view instead of using cover view to return -- >

<view class\='navbar-wrap'

style\='height:{{navbarHeight}}px;padding-top:{{statusBarHeight}}px;background:{{navbarData.bgColor ? navbarData.bgColor : "#fff"}}'\>

<view class\="navbar-text"

style\='line-height:{{navbarBtn.height + navbarBtn.top}}px;color:{{navbarData.textColor ? navbarData.textColor : "#333"}};'\>

* navbarData.title  ? navbarData.title  Default title}}

</view\>

<view class\="navbar-icon" wx:if\='{{navbarData.showCapsule ? navbarData.showCapsule : true}}'

style\="top:{{navbarBtn.top + statusBarHeight}}px;left:{{navbarBtn.right}}px;height:{{navbarBtn.height}}px;background:{{navbarData.btnBgColor ? navbarData.btnBgColor : '#fff'}};border-color:{{navbarData.borderColor ? navbarData.borderColor : 'rgba(0,0,0,0.3)'}}"\>

<image wx:if\='{{haveBack}}' data-id\="{{navbarData.parentId}}" bindtap\="\_goBack" class\="floatL haveback"

src\="../headerNavbar/img/navbar\_back\_{{navbarData.iconColor ? navbarData.iconColor : 'black'}}.png"\></image\>

<view wx:if\='{{haveBack}}' class\="floatL"

style\="border-color:{{navbarData.borderColor ? navbarData.borderColor : 'rgba(0,0,0,0.3)'}}"\></view\>

<image bindtap\="\_goHome" class\="homeimage" data-id\="{{navbarData.parentId}}"

src\="../headerNavbar/img/navbar\_home\_{{navbarData.iconColor ? navbarData.iconColor : 'black'}}.png"\></image\>

</view\>

</view\>

<view class\="navbar-loading" style\='height:{{navbarHeight}}px;line-height:{{navbarHeight}}px;'\></view\>
headerNavbar.wxss

.navbar-wrap{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999999;
  background-color: #3281FF;
  box-sizing: border-box;

}
.navbar-text {
  text-align: center;
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
}
.navbar-icon {
  position: fixed;
  display: flex;
  border-radius: 64rpx;
  border: 1rpx solid rgba(222,222,222,1);
  box-sizing: border-box;
}
.navbar-icon .homeimage {
  height: 36rpx;
  width: 42rpx;
  padding: 12rpx 26rpx 12rpx;
  display: inline-block;
  overflow: hidden;
}
.navbar-icon view {
  height: 36rpx;
  border-left: 1rpx solid rgba(222,222,222,1);
  margin-top: 12rpx;
}
.navbar-loading{
  /* background:#fff; */
  text-align:center;
}
.haveback{
  width: 18rpx;
  height:34rpx;
  padding: 12rpx 26rpx 12rpx;
  display: inline-block;
  overflow: hidden;
}