H5页面公告多行滚动轮播_h5 标签 公告滚动

      本人在开发中遇到问题

        纵向滚动的公告，常规操做为css3的动画效果实现，但随着内容的数量变多，随着而来的是不可控的滚动速度，我们只寄希望于通过，在vue项目中设置css变量，才能满足，数量多的时候设置播放频率。

  animation: scroll 8s linear infinite;

        所以，在我的项目中使用了折中的办法，通过js的定时器控制其播放速度。

<template>
    <div class="webWrap">
    <div class="notice-container">
            <div class="notice__inner" :style="{'top': top,'transition': transition}">
              <!--第一个默认为空，减少渲染突兀展现-->
              <ul class="notice__box"  > 
                <li class="notice" v-for="(item,index1) in noticeList" :key="index1">                            {{item.content}}</li>
              </ul>
      
            </div>
          
 
          </div>
    </div>
</template>    
<script>
import Vue from 'vue'   
export default {
  data() {
    return {
    noticeList:[],
    transition:'top  0.5s',
    activeIndex:0,
  },
  computed: {
    top() {
      let top=  -this.activeIndex *1.1 + "rem";  
      console.log('top================',top);
      return top
    },
  },
  created() {
    this.scrollUp();
  },
  methods: {
 
    //滚动播报方法
    scrollUp() {
      setInterval((_) => {
        if (this.activeIndex < this.noticeList.length) {
          this.activeIndex += 1;
          this.transition='top 0.5s'
        } else {
          this.activeIndex = -0;
          this.transition='top 0s'
        }
      }, 1000);
    },
  }
}
</script>
<style scoped>
  .webWrap{
    max-width:450px ;
    margin: 0% auto;
    position: relative;
    border: 1px solid #f1f5f9;
  }
.notice-container {
  width: 100%;
  height: 3.3rem;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #d1d5db;
  border-left: 1px solid #d1d5db;
  border-right: 1px solid #d1d5db;
  box-sizing: border-box;
  position: relative;
 
}
.notice__inner{
		width: 100%;
		height: 100%;
		font-size: 14px;
    font-weight: bolder;
		color: #000;
    position: absolute;
	}
 
.notice__box{
  display: flex;
  padding: 0.1rem 1rem;
  font-size: 0.8rem;
  min-height: 1rem;
  flex-direction: column;
}
 
.notice__box li{
  margin: 0.1rem;
}
.notice {
 /* position: absolute;*/
  white-space: nowrap;
 
}
 
</style>