数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

排7历史开奖:微信小程序实现红包雨功能

来源:脚本之家  责任编辑:小易  

河北20选五开奖结果 www.vhmyd.cn 本文为大家分享了微信小程序实现红包雨的具体代码,供大家参考,具体内容如下

今天有个小师妹来问我怎样用微信小程序实现红包雨效果,如果用web很好实现,但是小程序不是那么容易,整合自己也有一年没摸过小程序了,决定试一试。

首先明确“红包雨”的需求:

  • 随机位置掉落
  • 随机红包样式
  • 同一时间掉落个数随机
  • 每个红包的掉落速度随机,但不能太快也不能太慢

首先看看我做的效果吧

    首先明确小程序实现红包雨和web网页实现红包雨难点上有什么不同:

  • 小程序不能直接操作dom,web网页可以操作
  • 小程序循环渲染wx:for内无法执行animation,web网页中animation执行无条件约束
  • 小程序修改样式属性需要通过数据绑定无法直接修改,web网页可以直接取dom元素进行修改

    好了那么问题来了怎样实现生成红包雨呢?小程序无法直接操作dom也就意味着不能向dom内添加元素,这里我的解决办法是先生成预设个数的红包在视窗外部(用户看不到),然后修改每个红包的样式来实现动画(当然用css keyframes帧动画也可以,我这里使用的是js修改属性)

话不多说直接上代码吧,代码内有注释

wxml:

<view wx:for="{{packetList}}" wx:for-index="index" wx:for-item="items">
 <image class="red-packet" src="{{items.src}}" style="position:fixed;top:{{items.top}}px;left:{{items.left}}px;-webkit-transition:{{items.speed}}ms linear 0ms;transition:{{items.speed}}ms linear 0ms">
 </image>
</view>

wxss:

.red-packet{
 width: 20px;
 height: 25px;
 z-index: 100;
 transition-property:transform,top;
 transform-origin:50% 50% 0;
 -webkit-transition-property:transform,top;
 -webkit-transform-origin:50% 50% 0;
}

js:

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 windowWidth:"",//窗口宽度
 windowHeigh:"",//窗口高度
 packetList:[{}],//红包队列
 packetNum:200,//总共红包的数量
 showInter:''// 循环动画定时器
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 
 // 获取手机屏幕宽高
 wx.getSystemInfo({
  success: function (res) {
  that.setData({
   windowWidth: res.windowWidth,
   windowHeigh: res.windowHeight,
   top: res.windowHeight-100 //设置红包初始位置
  })
  }
 })
 
 //建立临时红包列表
 var packetList=[];
 //建立临时红包图片数组
 var srcList = ["../images/packet-one.png", "../images/packet-two.png"];
 //生成初始化红包
 for(var i=0;i<that.data.packetNum;i++){
  // 生成随机位置(水平位置)
  var left = Math.random() * that.data.windowWidth-20;
  // 优化位置,防止红包越界现象,保证每个红包都在屏幕之内
  if(left<0){
  left+=20;
  } else if (left > that.data.windowWidth){
  left-=20;
  }
  // 建立临时单个红包
  var packet = {
  src: srcList[Math.ceil(Math.random() * 2) - 1],
  top: -30,
  left:left,
  speed:Math.random() * 2500+3000  //生成随机掉落时间,保证每个掉落时间保持在3秒到5.5秒之间
  }
  // 将单个红包装入临时红包列表
  packetList.push(packet);
  // 将生成的临时红包列表更新至页面数据,页面内进行渲染
  that.setData({
  packetList: packetList
  })
 }
 
 // 初始化动画执行当前索引
 var tempIndex=0;
 // 开始定时器,每隔1秒掉落一次红包
 that.data.showInter=setInterval(function(){
  // 生成当前掉落红包的个数,1-3个
  var showNum = Math.ceil(Math.random() * 3);
  // 防止数组越界
  if (tempIndex * showNum>=that.data.packetNum){
  // 如果所有预生成的红包已经掉落完,清除定时器
  clearInterval(that.data.showInter);
  }else{
  switch (showNum){
   case 1:
   //设置临时红包列表当前索引下的top值,此处top值为动画运动的最终top值 
   packetList[tempIndex].top = that.data.windowHeigh;
   // 当前次掉落几个红包,索引值就加几
   tempIndex+=1;
   break;
   case 2:
   packetList[tempIndex].top = that.data.windowHeigh;
   packetList[tempIndex + 1].top = that.data.windowHeigh;
   tempIndex+=2;
   break;
   case 3:
   packetList[tempIndex].top = that.data.windowHeigh;
   packetList[tempIndex + 1].top = that.data.windowHeigh;
   packetList[tempIndex + 2].top = that.data.windowHeigh;
   tempIndex += 3;
   break;
   default:
   console.log();
  }
  // 更新红包列表数据
  that.setData({
   packetList: packetList
  })
  }
 },1000)
 }
})

好了红包雨就这样实现了,其实还是蛮有意思的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:


  • 本文相关:
  • vue移动端实现红包雨效果
  • js+css实现红包雨效果
  • sencha ext js 6 快速入门(必看)
  • javascript之典型高阶函数应用介绍二
  • jquery 返回json数据在ie浏览器中提示下载的问题
  • bootstrap源码解读导航条(7)
  • js实现弹出居中的模式窗口示例
  • bootstrap警告框示例代码分享
  • javascript 函数式编程的原理
  • 网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
  • javascript 学习笔记(onchange等)
  • 通过javascript实现页面自适应
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 河北20选五开奖结果 - 频道导航
    Copyright © 2017 河北20选五开奖结果 www.vhmyd.cn All Rights Reserved
  • 美最新研究:抑郁会引发记忆问题 2018-12-18
  • 日本佳子公主留学后回国 被称日本皇室"最美公主" 2018-12-18
  • 骗子用女子照片制作“通缉令” 诈骗对方11万 2018-12-18
  • 太原11家培训学校承诺规范办学 2018-12-18
  • 深圳2018年将开行3趟援疆旅游扶贫专列 2018-12-17
  • 人民日报80后评论员为大学生讲改革40年 2018-12-17
  • 用事实来回敬非马克思主义思潮(原创首发) 2018-12-17
  • 俄罗斯球队为国争光,为普京争脸。揭幕战横扫沙特队,吸引世界眼球。一代伟人普京,是俄罗斯人民的福气,强国,强军、富民,是普京献词“地球盛宴”的真正荣耀时刻,俄国人 2018-12-17
  • 习近平:请乡亲们同党中央一起,撸起袖子加油干! 2018-12-16
  • E3 2018:玩家期待已久的《上古卷轴6》正式公布 2018-12-16
  • 京东和他的“朋友圈” 2018-12-15
  • 新华国际时评:中国两会向世界传递三大信号 2018-12-15
  • 回复@看着就想笑:同时,市场不具有配置全局性长期性战略性资源的功能。 2018-12-15
  • 共产主义社会,马克思主义对未来的科学预测。对于共产党人来说,是自己的信仰,对于相信这种科学预测者来说,是一种价值追求。至于未来的共产主义实行什么样的分配方式,马 2018-12-14
  • “网络党课”第二课 杨禹《为美好生活而奋斗》 2018-12-14
  • 177| 351| 985| 154| 568| 603| 340| 697| 841| 630|