之前弹幕滚动效果也是使用CSS动画实现的，列表中根据当前KEY设置动画延时，但数据多的时候，安卓机卡顿明显。
此方式采用“分页”方式，每页（每次）截取指定数量的列表数据，当最后一个列表项动画执行完毕后（弹幕展示过程中会有一段时间空白），再截取展示下一页列表数据，当所有列表数据全部执行完毕后，再从第一页开始执行展示效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=750, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>弹幕test</title>
<style type="text/css">
*{ margin: 0; padding: 0; box-sizing: border-box;}
html{ max-width:750px; margin:0 auto; font-size:28px;}
li{ list-style: none;}
.message_list{ /* width: 582px; */ height: 389px; padding: 43px 0 0 0; margin: 0 auto; overflow: hidden;}
.message_list_nodata{ width: 100%; height: 100%; color: #B03726;
display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.message_list_nodata::before{ content: "还没有留言哦~";}
.message_list_nodata::after{ content: "快去提交留言吧~";}
.message_list ul{ position: relative;}
.message_list ul li{ max-width: 85%; height: 60px; line-height: 60px; padding: 0 20px; border-radius: 30px; border: #6D1C09 dashed 1px; background-color: #CD533A; position: absolute;}
.message_list ul li:nth-child(3n+1){ left: 0; top: 0;}
.message_list ul li:nth-child(3n+2){ left: 0; top: 93px;}
.message_list ul li:nth-child(3n+3){ left: 0; top: 186px;}
.message_list ul li{
-webkit-animation: message_list linear 8s both;
animation: message_list linear 8s both;
}
@-webkit-keyframes message_list{
0%{ left: 100%;}
100%{ left: -100%;}
}
@keyframes message_list{
0%{ left: 100%;}
100%{ left: -100%;}
}
.message_list ul li::after{ content: ""; width: 20px; height: 20px; border: #6D1C09 dashed 1px; border-top: none; border-right: none; background-color: #CD533A; position: absolute; left: 50%; bottom: -11px;
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
}
.message_list ul li div{ color: #F3E6C5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
</style>
</head>
<body>
<div id="app">
<div class="message_list">
<ul>
<li v-for="item,index in currList" :style="'-webkit-animation-delay:' + ((Math.floor(index / lineNumber) * intervalTime) + (index * lineDelay)) + 's;animation-delay:' + ((Math.floor(index / lineNumber) * intervalTime) + (index * lineDelay)) + 's;'">
<div>{{item.detail}}</div>
</li>
</ul>
<div v-if="isNoList" class="message_list_nodata"></div>
</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.6/vue.min.js"></script>
<script type="text/javascript">
var VM = new Vue({
el:"#app",
data:{
commentList:[], //留言列表 全部数据
listPageNumber:15, //每页固定展示 15 条留言
currList:[], //留言列表 当前页 展示数据
listTotalPage:0, //留言列表 总 页码
listCurrPage:0, //留言列表 当前 页码
lineNumber:3, //每轮弹幕展示的行数
lineDelay:.5, //每条弹幕动画间隔时间，单位s
intervalTime:2, //每行弹幕前后间隔动画执行的时间（lineNumber * lineDelay + intervalTime = 3.5），单位s（根据动画执行的时间调试设置）
isNoList:false,
},
created() {
this.init();
},
mounted() { },
watch:{ },
methods:{
// 首次展示弹幕
listShow(){
this.currList = [];
this.$nextTick(()=>{
this.listTotalPage = Math.ceil(this.commentList.length / this.listPageNumber);
this.listCurrPage = 1;
this.listChnage();
})
},
// 留言弹幕切换
listChnage(){
this.currList = this.commentList.slice((this.listCurrPage-1) * this.listPageNumber,(this.listCurrPage-1) * this.listPageNumber + this.listPageNumber);
this.$nextTick(()=>{
let _this = this;
$('.message_list ul li:last-child').on('animationend webkitAnimationEnd',function(e){
if(e.target === this) {
if(_this.listCurrPage >= _this.listTotalPage){
_this.listCurrPage = 1;
}else{
_this.listCurrPage++;
}
_this.currList = [];
_this.$nextTick(()=>{
_this.listChnage();
})
}
})
})
},
init(){
this.commentList = [].concat([{detail:'弹幕弹弹幕1'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕2'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕3'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕4'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕5'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕6'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕7'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕8'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕9'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕10'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕11'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕12'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕13'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕14'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕15'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕16'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕17'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕18'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕19'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕20'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕21'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕22'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕23'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕24'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕25'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕26'},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕27',},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕28',},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕29',},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕30',},{detail:'弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕31',}]);
// this.commentList = [];
if(!this.commentList.length){
this.isNoList = true;
}else{
this.listShow();
}
},
},
})
</script>
</body>
</html>
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
