手写上下轮播无缝切换

<template>
  <!-- 上下滚动 -->
  <div class="roll-wrapper">

    <div class="box">

      <div class="warn-wrapper" ref="warnlist">

        <ul class="warn-ul">

          <li v-for="(item, index) in warnInfo" :key="index">

            <span class="warn-title">{{ item.title }}</span>

            <span class="warn-time">{{ item.time }}</span>

            <div class="warn-content"> {{ item.content }}</div>

          </li>

        </ul>

        <ul class="warn-ul">

          <li v-for="(item, index) in warnInfo" :key="index">

            <span class="warn-title">{{ item.title }}</span>

            <span class="warn-time">{{ item.time }}</span>

            <div class="warn-content"> {{ item.content }}</div>

          </li>

        </ul>

      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: 'roll',
  data() {
    return {
      warnInfo: [
        {
          title: '风暴潮蓝色警报',
          time: '2023-07-01  08:00:00',
          content: '预计：7月8日白天，渤海湾和莱州湾将出现60到130厘米的风暴增水。山东省潍坊市的风暴潮预警级别为蓝色。'
        },
        {
          title: '风暴潮蓝色警报',
          time: '2023-07-02  08:00:00',
          content: '预计：7月8日白天，渤海湾和莱州湾将出现60到130厘米的风暴增水。山东省潍坊市的风暴潮预警级别为蓝色。'
        },
        {
          title: '风暴潮蓝色警报',
          time: '2023-07-03  08:00:00',
          content: '预计：7月8日白天，渤海湾和莱州湾将出现60到130厘米的风暴增水。山东省潍坊市的风暴潮预警级别为蓝色。'
        },
        {
          title: '风暴潮蓝色警报',
          time: '2023-07-04  08:00:00',
          content: '预计：7月8日白天，渤海湾和莱州湾将出现60到130厘米的风暴增水。山东省潍坊市的风暴潮预警级别为蓝色。'
        },
        {
          title: '风暴潮蓝色警报',
          time: '2023-07-05  08:00:00',
          content: '预计：7月8日白天，渤海湾和莱州湾将出现60到130厘米的风暴增水。山东省潍坊市的风暴潮预警级别为蓝色。'
        },
        {
          title: '风暴潮蓝色警报',
          time: '2023-07-06  08:00:00',
          content: '预计：7月8日白天，渤海湾和莱州湾将出现60到130厘米的风暴增水。山东省潍坊市的风暴潮预警级别为蓝色。'
        },
        {
          title: '风暴潮蓝色警报',
          time: '2023-07-07  08:00:00',
          content: '预计：7月8日白天，渤海湾和莱州湾将出现60到130厘米的风暴增水。山东省潍坊市的风暴潮预警级别为蓝色。'
        },
        {
          title: '风暴潮蓝色警报',
          time: '2023-07-08  08:00:00',
          content: '预计：7月8日白天，渤海湾和莱州湾将出现60到130厘米的风暴增水。山东省潍坊市的风暴潮预警级别为蓝色。'
        },
        {
          title: '风暴潮蓝色警报',
          time: '2023-07-09  08:00:00',
          content: '预计：7月8日白天，渤海湾和莱州湾将出现60到130厘米的风暴增水。山东省潍坊市的风暴潮预警级别为蓝色。'
        },
        {
          title: '风暴潮蓝色警报',
          time: '2023-07-10  08:00:00',
          content: '预计：7月8日白天，渤海湾和莱州湾将出现60到130厘米的风暴增水。山东省潍坊市的风暴潮预警级别为蓝色。'
        }
      ],
      warnScrollH: 0, //记录滚动到哪了
      warnScrollTime: null,
      steepTime: 0, // 滚动速度
    }
  },
  mounted() {
    // autoTime：模块之间的轮播时间  height：li的高度  3：当前展示的li的个数
    //滚动速度计算公式 autoTime / ( height * length - 3 ) 
    this.steepTime = 100 / (140 * 7)
    setTimeout(() => {
      this.warnScroll()
    }, 4 * 1000);

  },
  beforeDestroy() {
    clearInterval(this.warnScrollTime)
  },
  methods: {
    //循环滚动
    warnScroll() {
      var that = this; //因为定时器里要使用vue对象时不能用this, 在定时器中的 this 代表
      var target = this.$refs.warnlist;
      var initTop = 1;
      if (this.warnScrollH < 0) {
        initTop = this.warnScrollH * -1;
      }
      //定时器
      this.warnScrollTime = setInterval(function () {
        var flag = initTop % 140 === 0
        if (flag) {
          setTimeout(() => {
            initTop++;
          }, 4 * 1000);
        } else {
          initTop++;
        }

        if (initTop >= target.offsetHeight / 2) {
          initTop = 0;
        }
        target.style.top = "-" + initTop + "px"; //获取不到translateX的值改用 top
      }, this.steepTime * 1000);
      //  this.steepTime
    },

  }


}
</script>

<style scoped>
.roll-wrapper {
  width: 100%;
  height: 100%;

}

.box {
  width: calc(100% - 40px);
  overflow: hidden;
  /* height: 834px; */
  height: 420px;
  background: #0B2951;
  position: relative;
}

.warn-wrapper {
  position: absolute;
}

.warn-ul {
  text-align: left;
  color: #FFFFFF;
}

.warn-ul>li {
  width: 700px;
  height: 120px;
  background-image: url('/public/img/ocean_bck.png');
  background-size: 100% 100%;
  margin-bottom: 20px;
  padding-left: 16px;
  position: relative;
}
</style>