多行文字滚动加停留

原创已于 2022-11-29 17:43:33 修改 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-11-29 17:38:47 首次发布

vue 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了一个使用Vue和CSS实现多行文字滚动的页面样式。通过CSS的绝对定位和关键帧动画，创建了一个平滑滚动的效果。同时，Vue组件用于控制数据切换，定时器每5秒更新显示的内容，当数据耗尽时会隐藏滚动条。

多行文字滚动

页面样式写法

css

.m-slide{
	flex: auto;
	padding: 10rpx;
	overflow: hidden;
	position: relative;
	height: 40rpx;
	.item_li{
		position: absolute;
		height: 100%;
		width: 100%;
		font-size: 24rpx;
		line-height: 40rpx;
		animation: anim1 5s linear infinite;
		@keyframes anim1{
			0% {top: 100%; opacity: 0}
			30% {top: 0;opacity: 1}
			70% {top: 0; opacity: 1}
			100% {top: -100%; opacity: 0}
		}
	}
}

vue 页面

<view v-if="!empty" class="m-slide  cssmarqueeWrapper" ref="scroll_div" id="scroll_div"  >
  	  <view class="item_li" style = "width: 100%">
  	  	<view class="u-slide-title inline-block" >
  	  		{{sliderData[select_notice].title}}
  	  	</view>
  	 </view>
</view>

<script>

export default {
    // 变量
    data () {
        return {
            sliderData: [
                ...
            ],
		    select_notice: 0,
            empty: false
        }
     },
    onLoad(){
        this.initTime()
    },
     mounted (){
        // 定时器 定时切换显示行
         initTime(){
		    let that = this
		    this.timer = setInterval( () => {
			    if(that.sliderData && that.sliderData.length > 0) {
				    that.empty = false; 
				    // 弹出显示 并隐藏其他
				    if(that.select_notice == -1){
					    that.select_notice = 0;
				    }else if(that.select_notice < (that.sliderData.length-1) ) {
					    that.select_notice += 1;
				    }else {
					    that.select_notice += 1;
					    // 执行请求新数据 并且返回赋值
					    that.clearTimer();
				    }
			    } else {
				    // 如果没有新数据就直接隐藏
			       that.empty = true;
			       that.dmNewList = [];
			       that.select_notice = -1 ;
			    }		
			
		    },5000)
	    },
	    clearTimer (){
		    clearInterval(this.timer);        
		    this.timer = null;
		    this.select_notice = 0;
		    this.timer = setTimeout( () => {
			    this.initTime(); //再次执行
	   	    }, 5000)
	    }
    }
</script>