vue项目引用组件dataV,在本地运行时没有问题,打包放到服务器上后,刷新页面会出现样式错乱问题
控制台报警告
在这里插入图片

这时候我手动缩放一下页面又会变正常
我猜测是刷新了页面,组件适配时还没有获取到dom

在更改多方无果后,我去dataV官网看到了这个
在这里插入图片描述
因为我是只有在刷新后才会出现样式错乱问题,所以只监听了刷新操作,核心代码如下:

<template>
  <div class="wraps">
    <div class="title">123123</div>
    <div class="page_banner">
      <dv-scroll-board
        class="banner"
        :config="config"
        style="width: 99%; height: 95%; font-size: 16px !important"
        :key="key"
      />
    </div>
  </div>
</template>

<script>
import { findActivities } from '@/api/index'

export default {
  data() {
    return {
      key:11,//在dataV上绑定key值
      ww: [],
      config: {
        header: ['name1', 'name2'],
        data: [],
        rowNum: 4,
        headerBGC: '#1e5791',
        headerHeight: 40,
        waitTime: '5000',
        carousel: 'page',
        align: ['center', 'center'],
        oddRowBGC: '#0a1651',
        evenRowBGC: ''
      },
      times: null
    }
  },
  mounted() {
    this.pieOutlineFunc()
    this.getData()
    this.times = setInterval(() => {
      this.getData()
    }, 1000 * 360)

  },

  destroyed() {
    //销毁
    clearInterval(this.times)
  },
  methods: {
    async getData() {
      const res = await findActivities().then(res=>{
        return res.data.data})
      const Data = res.map((item) => {
        return [item.name, item.date.split(' ')[0]]
      })
      this.$nextTick(() => {
        this.config.data = Data
        this.config = { ...this.config }
      })
    },
    pieOutlineFunc() {
      var _this = this
      window.addEventListener('pageshow', function (e) {
        _this.$nextTick(() => {
          _this.key++
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.wraps {
  width: 100%;
  height: 100%;
}
.title {
  width: 100%;
  height: 11%;
  font-size: 18px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/image/borderTitle.png');
  background-repeat: no-repeat;
  background-size: 100.5% 100%;
}
.page_banner {
  width: 99.5%;
  height: 84%;
  margin: 0 auto;
  padding-top: 3%;
}
.banner {
  margin: 0 auto;
  font-size: 16px;
  /deep/.header {
    font-size: 16px !important;
  }
  /deep/.rows .row-item {
    font-size: 15px !important;
  }
}
</style>
Logo

前往低代码交流专区

更多推荐