小程序自定义导航栏

小程序自定义导航栏

子组件index.wxml

<view style="height: calc(100vmin / 750 * {{ktxStatusHeight}}); "></view>
<view style="height: calc(100vmin / 750 * {{navHeight}});line-height: calc(100vmin / 750 * {{navHeight}});" class="page-title">
  <view wx:if="{{back}}" class="back" bind:tap="back">
    <image class="backIcon" src="/images/phone/back.png" mode="" />
  </view>
  <text class="nav-name">{{name}}</text>
</view>

子组件index.js

// components/phone/custom-navbar/index.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    name: {
      type: String,
      value: ''
    },
    //返回按钮，默认隐藏
    back: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ktxStatusHeight: 0,
    navHeight: 0,
  },
  attached() {
    this.setData({
      ktxStatusHeight: getApp().globalData.ktxStatusHeight, //状态栏高度
      navHeight: getApp().globalData.navHeight // 导航栏高度
    })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    back: function () {
      const router = getCurrentPages()
      console.log('router', router);
      if (router.length <= 1) {
        wx.redirectTo({
          url: "/pages/tabBar/index/index",
        })
      } else {
        this.triggerEvent('back')
      }
    }
  }
})

子组件index.wxss

.page-title {
  font-weight: 600;
  font-size: calc(100vmin / 750 * 38);
  color: #333333;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}



.page-title .back {
  width: calc(100vmin / 750 * 61);
  height: calc(100vmin / 750 * 55);
  box-sizing: border-box;
  position: absolute;
  left: calc(100vmin / 750 * 10);
  padding: calc(100vmin / 750 * 10) calc(100vmin / 750 * 20);
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-title .back .backIcon {
  width: calc(100vmin / 750 * 21);
  height: calc(100vmin / 750 * 35);
}

.page-title .nav-name {
  width: calc(100vmin / 750 * 350);
  text-align: center;
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 超出隐藏 */
  text-overflow: ellipsis;
  /* 显示省略号 */
}

@media screen and (min-width: 700px) {
  .page-title {
    font-size: 26px;
  }

  .page-title .back {
    width: 40px !important;
    height: 36px !important;
    left: 6px;
    padding: 6px 12px;
  }

  .page-title .back .backIcon {
    width: 14px;
    height: 24px;
  }
}

父组件index.wxml

<custom-navbar back bind:back="backEvent" name="收藏夹" />

父组件index.js

backEvent: function () {
    wx.navigateBack({
      delta: 1
    })
  },

父组件index.json

{
  "navigationStyle": "custom",
  "usingComponents": {
    "custom-navbar": "/components/phone/custom-navbar/index",
    "v-empty": "/components/phone/empty/index"
  }
}

app.js

App({
  onLaunch: function (e) {
   

  },

  onShow: function () {
    // 避免小程序在平板不是全屏的情况下获取设备的宽高不一致
    wx.nextTick(() => {
      this.getSystem()
    })

  },

  //手机尺寸
  getSystem() {
    const systemInfo = wx.getSystemInfoSync();
    // px转换到rpx的比例
    let pxToRpxScale = 750 / systemInfo.windowWidth;
    var ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
    this.globalData.ktxStatusHeight = ktxStatusHeight
    this.globalData.windowWidth = systemInfo.windowWidth
    this.globalData.windowHeight = systemInfo.windowHeight
    //获取胶囊信息
    const menu = wx.getMenuButtonBoundingClientRect()
    // 导航栏的高度 ： （胶囊的顶部 - 状态栏高度 = 胶囊和状态栏距离 ）* 2 +  胶囊的高度
    let navHeight = ((menu.top * pxToRpxScale) - ktxStatusHeight) * 2 + (menu.height * pxToRpxScale)
    this.globalData.navHeight = navHeight
  },

  globalData: {
  


  }
})