微信小程序如何实现（点击发送弹幕）

扫一扫以上小程序【许愿灯池】可以查看具体点击发送弹幕功能

效果图：

点击“祝福一下吧~”即可弹出弹幕

 

直接上代码！！！

index.wxml

<view class="doommview">
    <block wx:for="{{doommData}}" wx:key="id">
        <text wx:if="{{item.display}}" class="aon" style="animation: first {{item.time}}s linear forwards;top:{{item.top}}%;color:{{item.color}};">
            {{item.text}}
        </text>
    </block>
</view>


<view class="button">
    <button bindtap="bindbt">祝福一下吧~</button>
</view>

index.wxss

.button{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.button button{
  position: relative;
  left: 0%;
  margin-top: -27%;
  font-size: 40rpx;
  border-radius: 20px 20px 20px 20px;
  color: white;
  background-color: red;
}
.aon{
position: absolute;
white-space:nowrap;/* 防止向下换行*/
}
.doommview{
  z-index: 3;
  height: 80%;
  width: 100%;
  position: absolute;
  background-color: transparent;
  top: 2%;
  left: 3%;
}
/**定义从右边向左边的移动的动画**/
@keyframes first{
  from{left: 100%; }
  to{left: -100%;}
}

index.js

bindbt:function(){
    doommList.push(new Doomm('梦想成真！大吉大利！万事如意！',Math.ceil(Math.random()*100),Math.ceil(Math.random()*10),getRandomColor()));
    this.setData({
      doommData : doommList
    })
  }

//上面的代码写在Page({})里面


//下面的代码写在Page({})外面
var doommList=[];
var i=0;
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('')
}

总结：通过以上代码可以搭建出和【许愿灯池】一样发送弹幕的小程序，所以如果想知道具体的效果，可以微信搜一搜【许愿灯池】或是二维码扫描：