小程序 导航头自定义

<view class="navigation-bar" style="height:{
    
    {navHeight}}px;background:{
    
    {backgroundColor}}">
  <view class="navigation-container" style="height:{
    
    {capsule.height + 2*gapHeight}}px">
    <view class="navigation-left">
        <view class="navigation-back" wx:if="{
    
    {showBack}}" catchtap="goBack">
            <i-icon name="sleft" size="32" color="#000000" class="icon-sright"></i-icon>
        </view>
      <view wx:else  class="slect-view" >

        <image  class="punchicon"  wx:if="{
    
    {!userInfo.userId}}"
        bind:tap="logined"  src="{
    
    {punchurlinner}}"></image>
       <image wx:else class="punchicon"  bind:tap="logined"  src="{
    
    {punchurlinner}}"></image>
     </view>

    </view>
    <view class="title" v-if="{
    
    {title}}" style="width:{
    
    {width>0 ? width+'rpx' : 'auto'}};">{
    
    {
    
    title}}</view>
  </view>
</view>
<view style="height:{
    
    {navHeight}}px;"></view>

.navigation-bar {
    
    
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    background-repeat: no-repeat;
    background-size: 750rpx;
    .navigation-container {
    
    
      position: absolute;
      width: 100%;
      bottom: 0;
      display: flex;
      box-sizing: border-box;
      z-index: 99;
      justify-content: center;
      align-items: center;
      .title {
    
    
        font-size: 34rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: black;
        letter-spacing: 2rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }
      .navigation-left {
    
    
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        display: flex;
        .slect-view {
    
    
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 30rpx;
          .slect-item {
    
    
            position: relative;
            height: 48rpx;
            line-height: 48rpx;
            background: #f0f0f0;
            border-radius: 8rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #313836;
            padding: 0 17rpx;
            display: inline-block;
            display: flex;
            .item-name {
    
    
              display: inline-block;
              max-width: 170rpx;
              margin-right: 18rpx;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .icon-caret {
    
    
              position: relative;
              width: 16rpx;
              height: 19.5rpx;
              top: 18rpx;
            }
          }
          .punchicon{
    
    
             width: 86rpx;
             height: 66rpx;
          }
        }
        .navigation-back {
    
    
          height: 100%;
          width: 96rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

const app = getApp();
Component({
    
    
  properties: {
    
    
    title: {
    
    
      type: String,
      value: '',
    },
    backgroundColor: {
    
    
      type: String,
      value: '#FFFFFF'
    },
    bgurl:{
    
    
      type: String,
      value: '',
    },
    showBack: {
    
    
      type: Boolean,
      value: false
    },
    punchurl:{
    
    
      type: Boolean,
      value: false
    },
    userId: {
    
    
      type: String,
      value: ''
    }
  },
  observers: {
    
    
    bgurl: function (val) {
    
    
      this.setData({
    
    
        bginnerurl: val,
      });
    },
    punchurl: function (val) {
    
    
      if(val===true){
    
    
        this.setData({
    
    
          punchurlinner: '/signhomeicon.png',
        });
      }else{
    
    
        this.setData({
    
    
          punchurlinner: 'signedicon.png',
        });
      }

    },

  },
  data: {
    
    
    navHeight: 0,
    bginnerurl:'',
    punchurlinner:'',
    userInfo:{
    
    }
  },
  async attached() {
    
    
    // console.log(this.data.list.INTENT_AREA.range.city)
    const res = app.globalData.systemInfo;
    this.setData({
    
    
      windowWidth: res.windowWidth,
      capsule: res.capsule,
      gapHeight: res.capsule.top - res.statusBarHeight,
      navHeight: res.capsule.bottom + res.capsule.top - res.statusBarHeight,
      hinttop: res.capsule.top,
    });
    const {
    
     userInfo } = await app.get(['userInfo', 'openId'])
    this.setData({
    
    
      userInfo
    })
    app.watch('userInfo', userInfo => {
    
    
      this.setData({
    
    
        userInfo
      })
    })
  },
  methods: {
    
    
    goBack(){
    
    
      this.triggerEvent('closepage')
    },
    logined(){
    
    
      this.triggerEvent('logined')
    }
  }
});