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

效果图：

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

直接上代码！！！

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 : colorrgb.push(color)}return '#' + rgb.join('')
}

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

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

微信小程序通过服务号推送模板消息
前言公司要做一款新的微信小程序,因为业务需求要加入消息推送.因为之前APP是通过服务号推送给用户消息的,所以微信小程序要做消息推送也是首先想到了通过服务号推送.事实上在使用过程中服务号推送还是非常好 ...
微信小程序云开发定时推送订阅消息
微信小程序云开发定时推送订阅消息 1.找到自己想要的模板 (1)点击订阅消息 (2)点击公共模板库,然后找到想要选用的模板,点击选用. (3)在我的模板里面,复制模板id. 如果找不到想要用的模板,可 ...
小程序消息主动推送php,微信小程序有几种推送消息的方式
微信小程序有5种推送消息的方式,分别为:1.小票机订单提醒,实现对商家的消息提醒:2.短信提醒:3.模板消息,各种动态可及时掌握:4.公众号订单提醒:5.消息主动推送,商家主动出击.推销自己的最好手段 ...
接入微信小程序客服消息推送
微信小程序客服消息推送接入这两天弄一个客服的消息推送,这里必须吐槽一下,按我以往接微信的东西的感觉这块估计也要踩坑的,而且众所周知微信的文档很坑的也乱.(吐槽一下) 小程序的配置设置: URL(服务 ...
微信小程序：炫酷手持滚动弹幕生成小工具
这是一款滚动弹幕生成微信小程序源码让弹幕文字在手机屏幕上跑起来,LED弹幕手机弹幕,告白神奇,等支持多种模板,每一种模板都支持自定义颜色等等字体跳动,字体表白等等另外用户也可以支持自定义文字 ...
【微信小程序】模板消息推送（测试成功）。
note: 这几天想做微信小程序消息推送的功能,然后在网上找了好多教程,都没解决问题,官方文档写的教程由不够详细,所以走了好多弯路. 现在问题解决了,记录一下. 我在网上找的好多教程都不详细,虽然是贴 ...
关于微信小程序uniapp版的推送消息
1.按钮触发推送消息 <button type="primary" size="mini" @tap="pushMesage"> ...
2023基于微信小程序的校园顺路代送跑腿系统(SSM+mysql)-JAVA.VUE(论文+开题报告+运行)
摘要现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式.本校园顺路代送微信小程序就是在这样的大环境下诞生,其可以帮助管理者在短时间 ...
突破微信小程序模板消息的推送限制
"模版消息"是小程序非常重要且可主动触达用户的一种能力.爱鲜蜂小程序通过"模版消息",建立一套用户唤醒机制,达到提升用户复购率的目的.小打卡小程序的近30天访问 ...
基于微信小程序的校园顺路代送小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...

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

效果图：

直接上代码！！！

index.wxml

index.wxss

index.js

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

最新文章

热门文章