手持弹幕小程序

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

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

　　} 更多关注。。。