cbsl-app/pages/forewarning/forewarning.vue

<template>
  <view :style="{ height: '100vh', overflow: 'hidden' }">
    <u-status-bar></u-status-bar>
    <u-navbar
      title="预警"
      :autoBack="true"
      :titleStyle="{
        fontSize: '18px',
      }"
      :height="44"
      :safeAreaInsetTop="true"
      leftIconSize="20"
      leftIconColor="rgb(153, 153, 153)"
    >
    </u-navbar>
    <!-- <u-tabs
      :list="tabsOptions"
      @click="tabsChange"
      :scrollable="false"
      class="tabsClass"
      :activeStyle="{ color: 'rgb(37, 157, 255)', fontSize: '16px' }"
      :inactiveStyle="{ color: '#606266', fontSize: '16px' }"
      lineColor="transparent"
      itemStyle="height: 44px"
      :customItemClass="getCustomItemClass"
    >
    </u-tabs> -->
    
		 <view class="tab-container">
    <view 
      v-for="(item, index) in tabsOptions" 
      :key="index"
      class="tab-item"
      :class="{ 'tab-active': tabsVal === item.components }"
      @click="tabsChange(item)"
    >
      {{ item.name }}
      <view v-if="item.hasData" class="red-dot"></view>
    </view>
  </view>
		<uniSh
      v-show="tabsVal === 'uniSh'"
      @hasData="updateTabData('uniSh', $event)"
			ref="shComponent"
    ></uniSh>
    <uniSk 
		v-show="tabsVal === 'uniSk'"  
		@hasData="updateTabData('uniSk', $event)"
		ref="skComponent"
		></uniSk>
    <uniHd 
		v-show="tabsVal === 'uniHd'" 
		@hasData="updateTabData('uniHd', $event)"
		ref="hdComponent"
		></uniHd>
  </view>
</template>

<script>
import moment from "moment";
import uniSh from "./sh.vue";
import uniSk from "./sk.vue";
import uniHd from "./hd.vue";

export default {
  components: { uniSh, uniSk, uniHd },
  data() {
    return {
      tabsOptions: [
        {
          name: "山洪预警",
          components: "uniSh",
          hasData: true,
        },
        {
          name: "水库预警",
          components: "uniSk",
          hasData: false,
        },
        {
          name: "河道预警",
          components: "uniHd",
          hasData: false,
        },
      ],
      tabsVal: "uniSh",
    };
  },
  methods: {
    getCustomItemClass(item, index) {
      return item.hasData ? "u-tabs__wrapper__nav__item--data-dot" : "";
    },
    tabsChange(item) {
      this.tabsVal = item.components;
      console.log(this.tabsVal);
  // 直接调用当前激活组件的submit方法
  if (this.tabsVal === 'uniSh') {
    this.$refs.shComponent.submit();
  } else if (this.tabsVal === 'uniSk') {
    this.$refs.skComponent.submit();
  } else if (this.tabsVal === 'uniHd') {
    this.$refs.hdComponent.submit();
  }
			
    },
    updateTabData(component, hasData) {
      const index = this.tabsOptions.findIndex(
        (item) => item.components === component
      );
      if (index !== -1) {
        this.tabsOptions[index].hasData = hasData;
      }
    },
		// 初始化所有子组件的数据
    initAllTabsData() {
      // 这里不需要做任何事情，因为子组件在created钩子中会自动请求数据
      // 由于我们使用了v-show而不是v-if，所有子组件都会被创建并执行created钩子
    }
  },
	mounted() {
    // 页面加载完成后初始化所有标签页数据
    this.initAllTabsData();
  }
};
</script>

<style lang="scss" scoped>
.myTitleStyle {
  font-size: 30px;
  background-color: red;
  height: 200px;
}
.tabsClass {
  margin-top: 44px;
  height: 44px;
  padding: 0 40px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.tab-container {
  display: flex;
  margin-top: 44px;
  height: 44px;
  padding: 0 40px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #606266;
  height: 100%;
}

.tab-active {
  color: rgb(37, 157, 255);
}

.red-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: red;
}
</style>