原生小程序自定义导航及状态栏

app.json
组件
 "usingComponents": {
    "page": "./component/page/index",
    "paging": "./component/paging/index",
    "t-nav-bar": "./itriton/nav-bar/index",
    "t-divider": "./itriton/divider/index"
  },

nav-bar/index.wxml


  
    
      
        
          
        
        
        
          
        
      
      
        
      
      {{title}}
    
  


index.js
// pages/nav-bar/nav-bar.js

Component({
  options: {
    multipleSlots: true
  },
  properties: {
    background: {
      type: String,
      value: 'rgba(255, 255, 255, 1)'
    },
    type: {
      type: String,
      value: 'light'
    },
    btnColor: {
      type: String,
      value: 'rgba(255, 255, 255, 1)'
    },
    textColor: {
      type: String,
      value: 'rgba(0, 0, 0, 1)'
    },
    title: {
      type: String,
      value: ''
    },
    visible: {
      type: Boolean,
      value: true
    },
    left: {
      type: String,
      value: ''
    }
  },
  lifetimes:{
    ready() {
      this.setNavSize()
      this.setStyle()
    },
  },
  data: {
    fontSize: 16
  },
  methods: {
    // 通过获取系统信息计算导航栏高度
    setNavSize() {
      let sysinfo = wx.getSystemInfoSync(),
        statusHeight = sysinfo.statusBarHeight,
        isiOS = sysinfo.system.indexOf('iOS') > -1,
        navHeight;
      if (!isiOS) {
        navHeight = 48;
      } else {
        navHeight = 44;
      }
      this.setData({
        status: statusHeight,
        navHeight: navHeight
      })
    },
    setStyle() {
      let containerStyle, textStyle, iconStyle;
      containerStyle = [
        'background:' + this.data.background
      ].join(';');
      textStyle = [
        'color:' + this.data.textColor,
        'font-size:' + this.data.fontSize + 'px'
      ].join(';');
      iconStyle = [
        'width: ' + this.data.iconWidth + 'px',
        'height: ' + this.data.iconHeight + 'px'
      ].join(';');
      this.setData({
        containerStyle: containerStyle,
        textStyle: textStyle,
        iconStyle: iconStyle
      })
    },
    bindToBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        wx.navigateBack({
          delta: 1
        })
      }
      this.triggerEvent('back', {
        back: 1
      })
    },
    bindToHome() {
      this.triggerEvent('home', {});
    },
    leftClick() {
      this.triggerEvent('left', {});
    }
  }
})

index.wxss
.nav-bar-wrap {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 999;
}

.nav-bar {
  font-size: 34rpx;
  letter-spacing: 2rpx;
  position: relative;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  height: 44px;
}

.nav-bar-img {
  width: 18px;
  height: 18px;
  z-index: 999;
}

.nav-bar-back {
  margin-left: 5px;
}

.nav-bar-back .nav-bar-img {
  margin-left: 5px;
}

.nav-bar-title {
  font-weight: 600;
  text-align: center;
  vertical-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340rpx;
}

.nav-bar-title.absolute {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-bar_left{
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.nav-bar__img{
  height: 25px;
  width: 25px;
  z-index: 999999;
}

.nav-bar-btn_icon_dark {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35rpx;
  border-radius: 40rpx;
  border: 1rpx solid rgba(255, 255, 255, .3);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin-left: 10px;
}

.nav-bar-btn_icon_light {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35rpx;
  border-radius: 40rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin-left: 10px;
}

.nav-bar-go_back {
  flex: 1;
  -webkit-flex: 1;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

.nav-bar-mid_line_dark {
  background-color: rgba(255, 255, 255, .3);
  width: 1rpx;
  height: 32rpx;
  z-index: 999;
}

.nav-bar-mid_line_light {
  background-color: rgba(255, 255, 255, .3);
  width: 1rpx;
  height: 32rpx;
  z-index: 999;
}

.nav-bar-go_home {
  flex: 1;
  -webkit-flex: 1;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

使用


  
  
  
    
    
  
  
    
      
    
  


index.wxss

/* pages/index/index.wxss */
.nav {
  display: flex;
  flex-wrap: wrap;
  padding: 40rpx 40rpx 0px;
  justify-content: space-between;
}

.nav__cell {
  padding: 20rpx;
  border-radius: 12rpx;
  width: 40%;
  margin: 0 2% 40rpx;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

.nav__cell::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -10%;
  border-radius: 10rpx;
  opacity: 0.2;
  transform: scale(0.9, 0.9);
}

.nav-title {
  font-size: 32rpx;
  font-weight: 300;
}

.nav-title::first-letter {
  font-size: 40rpx;
  margin-right: 4rpx;
}

.nav-name {
  font-size: 28rpx;
  text-transform: Capitalize;
  margin-top: 20rpx;
  position: relative;
}

.nav-name::before {
  content: "";
  position: absolute;
  display: block;
  width: 40rpx;
  height: 6rpx;
  background: #fff;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

.nav-name::after {
  content: "";
  position: absolute;
  display: block;
  width: 100rpx;
  height: 1px;
  background: #fff;
  bottom: 0;
  right: 40rpx;
  opacity: 0.3;
}

.nav-name::first-letter {
  font-weight: bold;
  font-size: 36rpx;
  margin-right: 1px;
}