微信小程序弹幕效果实现代码
大家可以看到很多APP都实现了弹幕功能，小程序也不例外。针对这一新上线的小程序功能，想要进行开发还得需要准确的代码，以下就是微信小程序弹幕效果的实现代码。
折腾了一周的微信小程序，一直在寻找弹幕效果，但是由于微信的MVVM小程序架构，很多HTML代码都无法运行，只有自己折腾一个出来。
先看一下弹幕效果：
主要原理是使用的CSS3的动画效果。
wxml代码：
{{item.text}}
弹一个小苹果
12345678910111213141234567891011121314
wxss：
/**index.wxss**/
.button{
position: absolute;
bottom: 0;
width: 100%;
}
.aon{
position: absolute;
white-space:nowrap;/* 防止向下换行*/
}
.doommview{
z-index: 3;
height: 80%;
width: 100%;
position: absolute;
}
/**定义从右边向左边的移动的动画**/
@keyframes first{
from{left: 100%; }
to{left: -100%;}
}123456789101112131415161718192021123456789101112131415161718192021
js:
//index.js
var page = undefined;
Page({
onLoad: function () {
page = this;
},
bindbt:function(){
doommList.push(new Doomm("你是我的小苹果",Math.ceil(Math.random()*100),Math.ceil(Math.random()*10),getRandomColor()));
this.setData({
doommData : doommList
})
},
data: {
doommData:[]
}
})
var doommList=[];
var i=0;//用做唯一的wx:key
class Doomm{
constructor(text,top,time,color){
this.text = text+i;
this.top = top;
this.time = time;
this.color = color;
this.display = true;
let that = this;
this.id = i++;
setTimeout(function(){
doommList.splice(doommList.indexOf(that),1);//动画完成，从列表中移除这项
page.setData({
doommData : doommList
})
},this.time*1000)//定时器动画完成后执行。
}
}
function getRandomColor() {
let rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
这样就可以实现一个弹幕效果，程序还有很多问题，还请各位看官见谅并指正。
微信小程序弹幕效果有助于用户在使用小程序的时候增强体验感，所以大家可以在开发小程序的时候试着开发以下小程序弹幕，更多资料请关注微信小程序商店。
微信小程序tab滑动效果开发代码
微信小程序分页效果，小程序分页滑动效果怎么弄
关于微信小程序动画，微信小程序的动画效果