vue 组件（弹幕消息提醒）动画

Edwin_jada

已于 2022-10-20 14:55:49 修改

阅读量516

点赞数 1

分类专栏： uni-app vue 文章标签： vue.js javascript 前端

于 2022-10-20 09:41:00 首次发布

本文链接：https://blog.csdn.net/Edwin_jade/article/details/127420686

版权

uni-app 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

html
<view class="dmNoticeList" v-if="!empty">
			<view class="list">
				<view v-if="index == nowDmIndex" :class="index == nowDmIndex?'showAndHide':''" class="item" v-for="(item, index) in dmNewList" :key="index">
					<view class="image">
						<images mode="widthFix" :src="item.pic"></images>
					</view>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>

js

// Data: (假数据)

empty: true,
nowDmIndex: -1, // 当前显示的弹幕块
timer: null, // 弹幕定时器 
dmNewList: [
    {
        title: '**我是1 新订单 五分钟前',
        pic: ''
    },
    {
        title: '**我是2 新订单 一分钟前',
        pic: ''
    },
    {
        title: '**我是3 新订单 三分钟前',
        pic: ''
    }
]
// onload 初始化
 this.DmListOrder();
// 方法区：

    
        DmListOrder(){
			// 时间 
			let time_jg = 5000;
			let that = this;
			that.nowDmIndex = -1;
			this.timer = setInterval( () => {
				let res = {};
				res.data = {list:[]};
				res.total = 3;
				res.data.list = that.dmNewList;
					if(res && res.total > 0) {
						that.dmNewList = res.data.list; //直接赋值
						that.empty = false; 
						// 弹出显示 并隐藏其他
						if(that.nowDmIndex == -1){
							that.nowDmIndex = 0;
						}else if(that.nowDmIndex < (that.dmNewList.length-1) ) {
							that.nowDmIndex += 1;
						}else {
							that.nowDmIndex = 0;
							// that.nowDmIndex += 1;
							// 执行请求新数据 并且返回赋值
							that.clearTimer();
						}
					} else {
						// 如果没有新数据就直接隐藏
					   that.empty = true;
					   that.dmNewList = [];
					   that.nowDmIndex = -1 ;
					}
				
			}, time_jg)
		},
        // 清理定时器 然后再次执行唤起 定时器
		clearTimer (){
		    clearInterval(this.timer);        
			this.timer = null;
            this.dmNewList = [];
			this.timer = setTimeout( () => {
				this.DmListOrder(); //再次执行
			}, 5000)
		},

<style lang="sass">
.dmNoticeList{
	z-index: 888;
	position: fixed;
	left: 1.5rem;
	top: 20%;
	width: fit-content;
	height: 2.5rem;
	animation: showAndHide 5s infinite;
	@keyframes showAndHide {
		0%{top: 15%;opacity: 0;}
		65%{top: 20%;opacity: 1;}
		100%{top: 15%;opacity: 0;}
	}
	.list{
		width: fit-content;
		height: 100%;
		font-size: 30rpx;
		background-color: #353535;
		opacity: 0.7;
		border-radius: 1.25rem;
		color: #fff;
		.item{
			display: flex;
			align-items: center;
			height: 100%;
			width: 100%;
			justify-content: space-between;
			.image{
				width: 2rem;
				height: 2rem;
				margin-right: 0.2rem;
				border-radius: 50%;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				margin-right:0.7rem;
			}
		}
	}
}
</style>