html:
<view class="doommview">
<view class="dan" wx:if="{{false==flag}}" bind:tap="dan_down">弹X</view>
<view class="dan" wx:if="{{false!=flag}}" bind:tap="dan_up">弹✔</view>
<block wx:for="{{doommData}}" wx:key="id">
<view wx:if="{{item.display}}" class="aon" style="animation: first {{item.time}}s linear forwards;top:{{item.top}}%;color:{{item.color}};">
<view style="display: flex;">
<image src="{{item.img}}" style="width: 60rpx;height: 60rpx;border-radius: 50%;" mode="" />
<view style="width: 5rpx;"></view>
<view style="height: 60rpx;line-height: 60rpx;"> {{item.text}}成功参与了拼团 </view>
</view>
</view>
</block>
</view>
写在page({ })外面:
var doommList = [];
var i = 0;
var ids = 0;
var cycle = null //计时器
var timer_daojishi
// 下面两个是控制抽奖顺序的速度的
var king = null
var wirel = null
// 弹幕参数
class Doomm {
constructor(text, top, time, color, img) { //内容,顶部距离,运行时间,颜色(参数可自定义增加)
this.text = text;
this.top = top;
this.time = time;
this.color = color;
this.img = img;
this.display = true;
this.id = i++;
}
}
// 弹幕字体颜色
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 '#' + 'FFFFFF'
}
css:
.button {
position: absolute;
bottom: 0;
width: 100%;
}
.aon {
position: absolute;
white-space: nowrap;
/* 防止向下换行*/
animation-timing-function: linear;
animation-fill-mode: none;
background-color: rgba(0, 0, 0, 0.40);
padding: 10rpx;
border-radius: 50rpx;
font-size: 35rpx;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.doommview {
z-index: 3;
/* //设置弹幕高度 */
height: 15%;
width: 100%;
position: fixed;
}
@keyframes first {
from {
left: 100%;
}
to {
left: -100%;
}
}
.dan {
position: fixed;
top: 15vh;
left: 2.7%;
background-color: rgba(0, 0, 0, 0.8);
width: 80rpx;
height: 80rpx;
border-radius: 50%;
text-align: center;
line-height: 80rpx;
color: #FFFFFF;
font-weight: 300;
}
js:
dan_up() {
var that = this
console.log('开启弹幕');
that.danmu()
that.setData({
flag: false,
})
},
dan_down() {
var that = this
that.setData({
doommData: []
})
clearInterval(cycle)
that.setData({
flag: true,
})
console.log('关闭弹幕');
},
danmu() {
that = this;
cycle = setInterval(function () {
let arr = that.data.arr
if (arr[ids] == undefined) {
ids = 0
// 1.循环一次,清除计时器
// doommList = []
// clearInterval(cycle)
// 2.无限循环弹幕
// 控制弹幕高度的参数: Math.ceil(Math.random() * 80) , 10是控制 移速的
doommList.push(new Doomm(arr[ids].text, Math.ceil(Math.random() * 80), 10, getRandomColor(), arr[ids].img));
if (doommList.length > 2) { //删除运行过后的dom
doommList.splice(0, 1)
}
console.log("ddd", doommList);
that.setData({
doommData: doommList
})
ids++
} else {
// 10是控制 移速的
doommList.push(new Doomm(arr[ids].text, Math.ceil(Math.random() * 80), 10, getRandomColor(), arr[ids].img));
if (doommList.length > 2) {
doommList.splice(0, 1)
}
that.setData({
doommData: doommList
})
ids++
}
}, 2000)
},
onHide() {
clearInterval(cycle)
clearInterval(timer_daojishi)
clearInterval(king);
clearInterval(wirel);
ids = 0;
doommList = []
},
onUnload() {
clearInterval(cycle)
clearInterval(timer_daojishi)
clearInterval(king);
clearInterval(wirel);
ids = 0;
doommList = []
},