uni-app tab切换

最新推荐文章于 2024-07-24 09:50:55 发布

胜杰720

最新推荐文章于 2024-07-24 09:50:55 发布

阅读量125

点赞数

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_71574589/article/details/128376035

版权

uni-app 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!-- 离线二次告警 -->
<template>
  <view class="salarm-offLine">
    <scroll-view class="salarm-offLine-title" scroll-x="true">
      <view
        v-for="(item, index) in titleData"
        :key="index"
        @tap="checkIndex(index)"
        :class="[
          navIndex == index ? 'salarm-offLine-title-active' : '',
          'salarm-offLine-item_H',
        ]"
        >{{ item }}</view
      >
    </scroll-view>
    <onceReport v-if="navIndex == 0"/>
    <exceedReport v-else-if="navIndex == 1"/>
    <powerReport v-else-if="navIndex == 2"/>
    <equipmentReport v-else-if="navIndex == 3"/>
  </view>
</template>

<script>
import powerReport from "../../components/report/powerReport/powerReport.vue";
import exceedReport from "../../components/report/exceedReport/exceedReport.vue";
import onceReport from "../../components/report/onceReport/onceReport.vue";
import equipmentReport from "../../components/report/equipmentReport/equipmentReport.vue";
export default {
  data() {
    return {
      titleData: ["离线一次告警", "超标告警", "电源告警", "设备清洗告警"],
      navIndex: 0,
    };
  },
  components: {
    powerReport,
    exceedReport,
    onceReport,
    equipmentReport,
  },
  methods: {
    checkIndex(index) {
      let _this = this;
      _this.navIndex = index;
      console.log(index);
    },
    //跳转详情页面
    handelSalarmList() {
      uni.navigateTo({
        url: "/components/report/salarmOffLineParticulars/salarmOffLineParticulars",
      });
    },
  },
};
</script>

<style lang="scss">
.salarm-offLine {
  height: 100%;
  .salarm-offLine-title {
    width: 100%;
    height: 40px;
    background-color: rgba(255, 255, 255, 1);
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
    .salarm-offLine-item_H {
      color: #888888;
      font-size: 26rpx;
      display: inline-block;
      margin: 0 3%;
      line-height: 78rpx;
      font-family: PingFang-SC-Regular;
      height: 80rpx;
    }
    .salarm-offLine-title-active {
      font-weight: bold;
      color: #3f87ff;
      position: relative;
      &::after {
        content: "";
        width: 80%;
        height: 3px;
        background: #3f87ff;
        position: absolute;
        bottom: 10%;
        left: 10%;
        border-radius: 10px;
      }
    }
  }
}
</style>