lcoco/pages/index/model/index-nav.vue

<template>
  <view class="">
    <view class="header"  :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
      <view class="header-left">
        <view class="left-text sys-color-black-0 sys-weight-600">筛选</view>
        <view class="left-img">
          <image class="down-img" src="/static/img/common/down.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="header-center">
        <view class="center-list">
          <view class="center-item sys-weight-600" @click="setTabNum(0)" :class="{'sys-color-black':tabNum===0,'sys-color-gray-9':tabNum!==0,}">发现</view>
          <view class="center-item sys-weight-600" @click="setTabNum(1)"  :class="{'sys-color-black':tabNum===1,'sys-color-gray-9':tabNum!==1,}">附近</view>
          <view class="center-item sys-weight-600" @click="setTabNum(2)"  :class="{'sys-color-black':tabNum===2,'sys-color-gray-9':tabNum!==2,}">匹配</view>
        </view>
        <view class="center-bg" :style="{'left':(tabNum*122)+'rpx'}"></view>
      </view>
      <view class="header-right">
        <image class="right-img" src="/static/img/index/pull-back.png" mode="aspectFill"></image>
        <image class="right-img" src="/static/img/index/exposure.png" mode="aspectFill"></image>
      </view>
    </view>
    <view class="box-title">
      <view class="" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
      </view>
    </view>
  </view>


</template>

<script>


  export default {
    name: "index-nav",
    data() {
      return {
        statusBarH: 0,
        customBarH: 0,
        left: 35,
        isXcx:false,
        tabNum:0
      }
    },
    props: {

    },
    computed: {

    },
    watch: {

    },
    methods: {
      setTabNum(tabNum){
        if(this.tabNum!==tabNum){
          this.tabNum=tabNum
          this.$emit('setTabNum',tabNum)
        }
      }
    },
    created() {
      uni.getSystemInfo({
        success: (e) =>{
          this.statusBarH = e.statusBarHeight + 10
          let custom=0;
          //#ifdef MP-WEIXIN
          custom = wx.getMenuButtonBoundingClientRect()
          this.customBarH = custom.height
          //#endif
          //#ifdef H5
          this.customBarH = 34
          this.left=0
          //#endif
          // #ifdef APP-PLUS
          this.customBarH = 34
          this.left=0
          //#endif
          console.log('self.customBarH---------'+this.customBarH)
          console.log('self.statusBarH---------'+this.statusBarH)
          this.$emit('navHeight', this.customBarH+this.statusBarH)
        }
      })

    }
  }
</script>

<style scoped lang="scss">
@import url("/static/css/en-common.css") ;

  .header {
    width: calc(100vw - 72rpx);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    height: 88rpx;
    padding: 12rpx 36rpx;
    //box-sizing: border-box;
    background-color: #fff;
    .header-left{
      padding: 10rpx 0;
      height: 44rpx;
      display: flex;
      justify-content: flex-start;
      .left-text{
        height: 44rpx;
        line-height: 44rpx;
        font-size: 28rpx;
      }
      .left-img{
        padding: 0 6rpx;
        .down-img{
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    .header-center{
      width: 366rpx;
      height: 64rpx;
      background: #EEEEEE;
      border-radius: 200rpx;
      position: relative;
      .center-list{
        z-index: 112;
        display: flex;
        justify-content: space-between;
        height: 64rpx;
        .center-item{
          z-index: 113;
          width: 122rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          font-size: 32rpx;
        }
      }
      .center-bg{
        z-index: 111;
        position: absolute;
        margin: 4rpx 2rpx;
        width: 120rpx;
        background-color: #fff;
        border-radius: 200rpx;
        height: 56rpx;
        left: 0;
        top: 0;
        transition: .5s ease;
      }


    }
    .header-right{
      height: 64rpx;
      display: flex;
      justify-content: flex-end;
      .right-img{
        padding: 6rpx 0;
        width: 52rpx;
        height: 52rpx;
      }
      .right-img:first-child{
        margin-right: 40rpx;
      }
    }


  }



  .box-title {
    width: 100vw;
  }


</style>