uni 组件 头部

//头部的组件，
//组件页面代码
<template>
<!--components/pet-navbar/pet-navbar.wxml-->
<view class="pet-navbar" :style="'height:' + (nh+'px') + ';background:' + background + ';color:' + color">
  <view class="pet-back" v-if="isBack" @tap="backPrevPage" :style="'padding:' + ((mh-19)/2+mt-sh+'px') + ' 30rpx'">
    <image src="/static/images/icons/back.png" ></image>
  </view>
<!-- @tap="isBack?'backPrevPage':''" -->
  <view class="pet-title" :style="'padding:' + ((mh-19)/2+mt-sh+'px') + ' 0;font-size:' + fontSize + ';text-align:' + position">{{title}}</view>
  <view class="pet-empty" :style="'padding:' + ((mh-19)/2+mt-sh+'px') + ' 30rpx'"></view>
</view>

<!-- background:    背景颜色 -->
<!-- color:         文字颜色 -->
<!-- isBack:        是否带有返回按钮 -->
<!-- fontSize:      字体大小 -->
<!-- position: 文字对齐方式 -->
<!-- title:         文字 -->
</template>

<script>

export default {
  data() {
    return {
      sh: 0,
      //  手机状态栏高度
      nh: 0,
      //  计算后的自定义导航栏高度
      mh: 0,
      //  胶囊高度
      mt: 0 //  胶囊top

    };
  },

  components: {},
  props: {
    //  文字的颜色，箭头颜色暂不能修改，随后建图标库后可修改
    color: {
      type: String,
      default: '#333'
    },
    //  背景颜色
    background: {
      type: String,
      default: '#fff'
    },
    //  文字内容
    title: {
      type: String,
      default: ''
    },
    //  是否带返回箭头
    isBack: {
      type: Boolean,
      default: false
    },
    //  内容的对齐方式
    position: {
      type: String,
      default: 'center'
    },
    //  内容字体大小，图标库确定后可增加改变返回箭头大小
    fontSize: {
      type: String,
      default: '30rpx'
    },
    url: {
      type: String,
      default: ''
    }
  },
  //  组件加载时获取状态栏高度，计算导航栏高度
  beforeMount() {
    var that = this;
    let systemInfo = uni.getSystemInfoSync();　　　　　　　　　　　　　//获取设备相关信息 80     let info = systemInfo;
    let menuBtn = uni.getMenuButtonBoundingClientRect();　　　　　　//获取到胶囊元素的相关信息
    var sh = info.statusBarHeight;
    that.setData({
      sh: sh,
      mh: menuBtn.height,
      mt: menuBtn.top,
      nh: sh + menuBtn.height + (menuBtn.top - sh) * 2
    });
  },

  methods: {
    //  返回上一页
    backPrevPage() {
            console.log('dsadasd')
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2];
      var currentPage = pages[pages.length - 1];

      if (this.url.value) {
        uni.redirectTo({
          url: url,
          fail: () => {
            uni.switchTab({
              url: url
            });
          }
        });
      }

      if (prevPage == undefined) {
        uni.switchTab({
          url: '/pages/index/index'
        });
      } else {
        var delta = 1;
        var len = pages.length - 1;

        for (var i = len; i > 0; i--) {
          prevPage = pages[i - 1];

          if (!prevPage) {
            uni.switchTab({
              url: '/pages/index/index'
            });
          } else if (prevPage.route == currentPage.route) {
            delta++;
          }
        }

        uni.navigateBack({
          delta: delta
        });
      }
    } //  


  }
};
</script>
<style lang="scss">

.pet-navbar{
  height: 80rpx;
  width: 750rpx;
  display: flex;
  align-items: flex-end;
  background-color: #FFFFFF;
}
.pet-back,
.pet-back  image,
.pet-empty{
  height: 34rpx;
  width: 18rpx;
  font-size: 0;
}
.pet-title{
  flex: 1;
  line-height: 1;
  font-size: 36rpx;
  font-weight: 500;
  font-family: PingFangSC-Medium, PingFang SC;
}
</style>




//调用组件页面的代码

<template>
    <view>
        <pet-navbar isBack="true" title="优惠券"></pet-navbar>
    </view>
</template>

<script>
    import petNavbar from "@/components/pet-navbar/pet-navbar";
    export default {
        components: {
            petNavbar,
        },
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>

</style>