remember-word/components/navBar/navBar.vue

<template>
  <view>
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view style="height: 110upx">
      <u-sticky offset-top="0" v-if="stickyShow">
        <u-navbar
          :is-back="false"
          :title="navTitle"
          :bgColor="background"
          :titleStyle="titleStyle"
          :color="color"
        >
          <view slot="left">
            <text
              v-if="isBack"
              @click="navigateBack"
              class="back"
              :style="{ backgroundColor: `${this._props.backBackGroundColor}` }"
              >{{ $t("navbar.back") }}</text
            >
            <text v-else></text>
          </view>
        </u-navbar>
      </u-sticky>
      <u-navbar
        :is-back="false"
        :title="navTitle"
        :bgColor="background1"
        :titleStyle="titleStyle"
      >
        <view slot="left">
          <text
            v-if="isBack"
            @click="navigateBack"
            class="back"
            :style="{ backgroundColor: `${this._props.backBackGroundColor}` }"
            >{{ $t("navbar.back") }}</text
          >
          <text v-else></text>
        </view>
        <view slot="center" v-if="hasLogo">
          <image
            style="width: 202upx; height: 60upx"
            src="../../static/image/home/fontree.png"
          ></image>
        </view>
        <view slot="right" v-if="hasRight" @click="clickRight">
          <image
            style="width: 80upx; height: 34upx"
            src="../../static/image/mine/feedback.png"
          ></image>
        </view>
      </u-navbar>
    </view>
  </view>
</template>

<script>
export default {
  name: "navBar",
  props: {
    isBack: {
      type: Boolean,
      default: true,
    },
    navTitle: {
      type: String,
      required: true,
      default: "",
    },
    stickyShow: {
      type: Boolean,
      default: false,
    },
    backToUrl: {
      type: String,
      default: "",
    },
    isSwitchTab: {
      type: Boolean,
      default: false,
    },
    hasLogo: {
      type: Boolean,
      default: false,
    },
    hasRight: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "",
    },
    backBackGroundColor: {
      type: String,
      default: "rgba(255, 255, 255)",
    },
    sfBack: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      background: "rgba(255, 255, 255)",
      background1: "transparent",
    };
  },
  computed: {
    titleStyle() {
      return {
        color: this._props.color ?? "#fff",
        fontSize: "36upx",
      };
    },
  },
  methods: {
    navigateBack(params) {
      const pages = getCurrentPages();
      if (this.sfBack) {
        return this.$emit("triggerSfBack");
      }
      if (this.backToUrl.length > 0) {
        if (this.isSwitchTab) {
          uni.switchTab({
            url: this.backToUrl,
          });
        } else {
          console.log("navigateTo");
          uni.navigateTo({
            url: this.backToUrl,
          });
        }
      } else {
        if (pages.length === 1) {
          if (typeof params === "number") {
            history.go(-params);
          } else {
            history.back();
          }
        } else {
          uni.navigateBack();
        }
      }
    },
    clickRight() {
      this.$emit("clickRight");
    },
  },
};
</script>

<style lang="scss">
.back {
  font-size: 28upx;
  color: #ffffff;
  padding: 10rpx 32rpx;
  border-radius: 40rpx;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
</style>