learning-system-mobile/components/page-title/page-title.vue

<template>
  <view class="top" :class="[sticky ? 'sticky': '']">
    <view v-show="showBack" class="top-back" @click="toBack()">
      <u-icon color="#333" size="20" name="arrow-left"></u-icon>
    </view>
    <view class="top-title">
      <slot></slot>
    </view>
    <view @click="topgae()" style="color: #387DF7;">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    backUrl: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: false
    },
    goPgae: {
      type: String,
      default: ''
    },
    // 启用粘性滚动
    sticky: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    topgae() {
      if (this.goPgae != '') {
        uni.navigateTo({
          url: this.goPgae
        });
      }
    },
    toBack() {
      // 如果定义的有 go 事件，优先处理这个
      if (this.$listeners['go']) {
        this.$emit('go')
        return
      }
      if (this.backUrl != '') {
        if (this.backUrl == '/pages/my/index') {
          uni.switchTab({
            url: this.backUrl
          })
        } else {
          uni.navigateTo({
            url: this.backUrl
          });
        }
      } else {
        let pages = getCurrentPages();
        //console.log(pages);
        const prevPage = pages[pages.length - 2];
        if (!prevPage) {
          uni.switchTab({
            url: '/pages/index/index'
          })
        } else {
          uni.navigateBack();
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 40px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;

  .top-back {
    z-index: 2;
    color: #333;
    //padding-top:10px;
    //height: 40px;
    //line-height: 40px;
    padding-left: 15px;
  }

  .top-title {
    width: 100%;
    text-align: center;
    position: absolute;
    font-size: 16px;
    font-weight: 550;
    color: #333;
    height: 40px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 40px;
  }

  &.sticky {
    position: sticky;
    top: 0;
    //防止其他元素遮盖
    z-index: 99;
  }
}

// .arrow:before {
//    content: " ";
//    display: inline-block;
//    -webkit-transform: rotate(45deg);
//    -ms-transform: rotate(45deg);
//    transform: rotate(45deg);
//    height: .5rem;
//    width: .5rem;
//    border-width: 0 0 2px 2px;
//    border-color: #FFFFFF;
//    border-style: solid;
//    position: relative;
//    top: 0
//    }
</style>