qy_bigScreen/src/views/index.vue

<template>
  <div id="screen-container">
    <div v-if="isLoading" class="loading">
      <dv-loading>Loading...</dv-loading>
    </div>
    <Header :header-title="headerTitle" />
    <div style="position: fixed; right: .14rem; top: .14rem; font-size: .14rem; background: rgba(82,146,255,0.2);border: 1px solid #5292FF; padding: .03rem .06rem; line-height: .25rem;">{{ active +' / '+ pageData.length }}</div>
    <section ref="sectionRef">
      <keep-alive>
        <PageOne
          v-if="active === 1"
          ref="user"
          :height="height"
          :fullscreen="fullscreen"
        />
      </keep-alive>
      <Map
        v-if="active === 2"
        :height="height"
        :fullscreen="fullscreen"
      />
      <div v-if="active === 3">第三屏</div>
      <div v-if="active === 4">第四屏</div>
    </section>
    <div class="bottom-bg" />
  </div>
</template>

<script>
import Header from '@/views/header/index.vue'
import PageOne from '@/views/pageOne/index.vue'
import Map from '@/views/map/index.vue'
export default {
  name: 'Home',
  components: {
    Header,
    PageOne,
    Map
  },
  data() {
    return {
      active: 1,
      isLoading: false,
      fullscreen: false,
      height: '',
      headerTitle: '祁阳陶铸图书馆智慧大屏馆情数据总览',
      pageData: [
        {
          id: 1, title: 'page1', delayed: 10
        },
        {
          id: 2, title: 'page2', delayed: 0
        },
        {
          id: 3, title: 'page3', delayed: 10
        },
        {
          id: 4, title: 'page4', delayed: 0
        }
      ],
      swiperOption: null,
      pageIndex: 0,
      timer: null,
      timer2: null
    }
  },
  computed: {
  },
  created() {
    // const METAWA = require('../assets/js/META.common.min.js')
    // const meta = new METAWA('665e845538d68')
    // meta.callback = (r) => {
    //   console.log(r, '回调')
    // }
  },
  beforeDestroy() {
    clearInterval(this.timer2)
    window.removeEventListener('resize', this.setElementHeight)
  },
  mounted() {
    this.showLoading()
    this.setElementHeight()
    window.addEventListener('resize', this.setElementHeight)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer2)
      window.removeEventListener('resize', this.setElementHeight)
    })
    // this.autoPagination()
  },
  methods: {
    autoPagination() {
      clearInterval(this.timer2)
      this.timer2 = setInterval(() => {
        setTimeout(() => {
          if (this.active >= this.pageData.length) {
            this.active = 1
          } else {
            this.active++
          }
          // this.showLoading()
        }, 0)
      }, 6000)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timer2)
      })
    },
    showLoading() {
      this.isLoading = true
      this.timer = setTimeout(() => {
        this.isLoading = false
        window.clearTimeout(this.timer)
      }, 1500)
    },
    // 设置DOM高度
    setElementHeight() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.showLoading()
        this.height = `${(this.$refs.sectionRef.offsetHeight - 30) / 3}px`
      }, 100)
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
.swiper-home{
  .swiper-wrapper{
    transition-timing-function: ease-in-out !important;
  }
  .swiper-slide{
    position: relative;
    width: 100%;
    // height: calc(100vh - 1.125rem) !important;
    overflow: hidden;
  }
  .swiper-pagination-home{
    position: fixed;
    top: .2rem;
    left: calc( 100% - 2rem);
    font-size: .4rem;
  }
}

</style>