两大微信小程序实现弹幕效果方法,手持弹幕微信怎么搞的

手持弹幕小程序

　　手持弹幕小程序-是一个文字滚动工具，适用于寻人，接机，粉丝应援。

8.0分

　　微信对于大家来说都不陌生，不过里面有好多小功能相信朋友们就不一定都知道。

　　比如说：彩字弹幕。

　　方法/步骤

　　1打开微信，点击【发现】

　　2找到并点击进入【小程序】

　　3点击右上角的“小放大镜”图标，输入“手持弹幕”。

　　4选择点击“手持弹幕”，生成“弹幕”页面。

　　5按照个人喜好对“弹幕”进行设置。(输入您想表达文字)

　　6然后选择要发送“彩字弹幕”的朋友。

　　7点击“发送”(您的朋友点击之后就会看到有意思的字幕显示)。

　　微信小程序实现弹幕效果

　　主要原理是使用的CSS3的动画效果。

　　wxml代码：

　　{{item.text}}

　　1234567891011121314

　　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%;}

　　}123456789101112131415161718192021

　　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('')

　　} 更多关注hi小程序。