【微信小程序】顶部标题导航栏模板

以下是我自己写的一个标题导航栏模板，较为简陋，需要什么属性可自行添加。

---

HTML部分

<template>
  <div class="comp-navbar">
    <!-- 占位栏 -->
    <div class="placeholder-bar" :style="{height: holderBarHeight + 'px'}"> </div>
    <!-- 导航栏主体 -->
    <div class="navbar" :style="{height: navBarHeight + 'px',backgroundColor:bg}">
      <!-- 状态栏 -->
      <div class="nav-statusbar" :style="{height: statusBarHeight + 'px',background:navBackgroundColor1}"></div>
      <!-- 标题栏 -->
      <div class="nav-titlebar" :style="{height: titleBarHeight + 'px',backgroundColor:navBackgroundColor2}">
        <!-- 后退键 -->
        <div v-if="backVisible" :style="{height:rectHeight+'px' }" class="opt-back" @click="backClick()">
          <img class="back-image" src="/static/images/back.png">
        </div>
        <!-- 标题 -->
        <div class="bar-title" :style="[{color:titleColor,fontSize:titleSize+'px',lineHeight:rectHeight+5+'px'}]">{{title}}</div>
      </div>
    </div>
  </div>
</template>

javascript部分

<script>
export default {
  data(){
    return {
      holderBarHeight:20,//占位符高度
      statusBarHeight:20,//状态栏高度
      titleBarHeight:46,//标题栏高度
      navBarHeight:66,//导航栏主体高度
      rectHeight:40,
      bg:'transparent',
    }
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        // console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        // console.log(self.hasTitlebar)
          self.platform = system.platform;
          let platformReg = /ios/i;
          if (platformReg.test(system.platform)) {
            self.titleBarHeight = 44;
          } else {
            self.titleBarHeight = 48;
          }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
        if(self.hasTitlebar){
          self.holderBarHeight=self.navBarHeight;
          self.bg='#0b3299'
        }else if(!self.hasTitlebar){
          self.holderBarHeight=self.statusBarHeight;
          self.bg='transparent';
        }
      }
    });
    // 获取胶囊数据
    var rect=wx.getMenuButtonBoundingClientRect()
    // console.log(rect)
    self.rectHeight=rect.height+rect.top-self.statusBarHeight
  },
  methods:{
    backClick(){
      // console.log("back")
      wx.navigateBack({
        delta:1
      })
    },
  },
  props:[
    "hasTitlebar",//是否有标题栏
    "navBackgroundColor1",//状态栏背景颜色
    "navBackgroundColor2",//标题栏背景颜色
    "titleColor",
    "titleSize",
    "title",
    "backVisible",//是否有返回按钮
  ]
}
</script>

CSS部分

<style lang="less" scoped>
.comp-navbar {
    width: 100vw;
    .navbar {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 9999999;
        .nav-titlebar {
            // border: 1px solid green;
            width: 100%;
            display: flex;
            // align-items: center;
            justify-content: center;
            position: relative;
            .opt-back{
              position: absolute;
              left: 0px;
              top: 0px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 32px;
              height: 40px;
              .back-image{
                width: 16px;
                height: 16px;
              }
            }
            .bar-title {
                width: 45%;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
            }
        }
    }
    .placeholder-bar{
        background-color: transparent;
        width: 100%;
    }
}
</style>