圣诞节快到啦～🎄🎄🎄🎄咱们也试着做做小程序版本的星星✨飘落效果吧～ 先来个效果图： [图片] 484听起来很叼，看起来也就那样。 来咱们上手开始撸 页面内容wxml，先简单切个图吧。 [代码]<view class="container"> <image src="https://qiniu-image.qtshe.com/merry_001.jpg" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_02.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_03.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_04.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_05.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_06.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_07.jpg" alt="" mode="widthFix"/> </view> <canvas canvas-id="myCanvas" /> [代码] 页面样式wxss，因为切片用的不太熟练，图片之间有个2rpx的空隙。 [代码].container { height: 100%; box-sizing: border-box; min-height: 100vh; } image { width: 100%; display: block; margin-top: -2rpx; //不会切图造的孽 } canvas { width: 100%; min-height:100vh; position: fixed; top: 0; z-index: 888; } [代码] 重点JS： [代码]//获取应用实例 const app = getApp() // 存储所有的星星 const stars = [] // 下落的加速度 const G = 0.01 const stime = 60 // 速度上限，避免速度过快 const SPEED_LIMIT_X = 1 const SPEED_LIMIT_Y = 1 const W = wx.getSystemInfoSync().windowWidth const H = wx.getSystemInfoSync().windowHeight var starImage = '' //星星素材 wx.getImageInfo({ src: 'https://qiniu-image.qtshe.com/WechatIMG470.png', success: (res)=> { starImage = res.path } }) Page({ onLoad() { this.setAudioPlay() }, onShow() { this.createStar() }, createStar() { let starCount = 350 //星星总的数量 let starNum = 0 //当前生成星星数 let deltaTime = 0 let ctx = wx.createCanvasContext('myCanvas') let requestAnimationFrame = (() => { return (callback) => { setTimeout(callback, 1000 / stime) } })() starLoop() function starLoop() { requestAnimationFrame(starLoop) ctx.clearRect(0, 0, W, H) deltaTime = 20 //每次增加的星星数量 starNum += deltaTime if (starNum > starCount) { stars.push( new Star(Math.random() * W, 0, Math.random() * 5 + 5) ); starNum %= starCount } stars.map((s, i) => { //重复绘制 s.update() s.draw() if (s.y >= H) { //大于屏幕高度的就从数组里去掉 stars.splice(i, 1) } }) ctx.draw() } function Star(x, y, radius) { this.x = x this.y = y this.sx = 0 this.sy = 0 this.deg = 0 this.radius = radius this.ax = Math.random() < 0.5 ? 0.005 : -0.005 } Star.prototype.update = function() { const deltaDeg = Math.random() * 0.6 + 0.2 this.sx += this.ax if (this.sx >= SPEED_LIMIT_X || this.sx <= -SPEED_LIMIT_X) { this.ax *= -1 } if (this.sy < SPEED_LIMIT_Y) { this.sy += G } this.deg += deltaDeg this.x += this.sx this.y += this.sy } Star.prototype.draw = function() { const radius = this.radius ctx.save() ctx.translate(this.x, this.y) ctx.rotate(this.deg * Math.PI / 180) ctx.drawImage(starImage, -radius, -radius * 1.8, radius * 2, radius * 2) ctx.restore() } }, setAudioPlay() { let adctx = wx.createInnerAudioContext() adctx.autoplay = true adctx.loop = true adctx.src = 'https://dn-qtshe.qbox.me/Jingle%20Bells.mp3' adctx.onPlay(() => { console.log('开始播放') adctx.play() }) } }) [代码] 以上只是简单实现了一个星星飘落的效果，预览的时候需要开启不校验合法域名哦～ 目前还有更优的h5版本，使用Three.js实现的，在小程序内使用Three.js对于我来说有点打脑壳，先把效果分享出来吧。 h5版本，手机看效果最佳 h5源码可直接右键查看：https://qiniu-web.qtshe.com/merryChrimas.html

1、基本需求。 实现用户自定义弹框 带动画（动画可做参靠，个人要是觉得不好看可以自定义动画） 获取弹出框的内容，自定义事件获取 2、案例目录结构 二、程序实现具体步骤 1.弹框index.wxml代码 [图片] <!–button–> <view class=“btn” bindtap=“powerDrawer” data-statu=“open”>来点我呀</view> <!–mask–> <view class=“drawer_screen” bindtap=“powerDrawer” data-statu=“close” wx:if="{{showModalStatus}}"></view> <!–content–> <!–使用animation属性指定需要执行的动画–> <view animation="{{animationData}}" class=“drawer_box” wx:if="{{showModalStatus}}"> <!–drawer content–> <view class=“drawer_title”>弹窗标题</view> <view class=“drawer_content”> <view class=“top grid”> <label class=“title col-0”>标题</label> <input class=“input_base input_h30 col-1” name=“rName” value=“可自行定义内容”></input> </view> <view class=“top grid”> <label class=“title col-0”>标题</label> <input class=“input_base input_h30 col-1” name=“mobile” value=“110”></input> </view> <view class=“top grid”> <label class=“title col-0”>标题</label> <input class=“input_base input_h30 col-1” name=“phone” value=“拒绝伸手党”></input> </view> <view class=“top grid”> <label class=“title col-0”>标题</label> <input class=“input_base input_h30 col-1” name=“Email” value=“仅供学习使用”></input> </view> <view class=“top bottom grid”> <label class=“title col-0”>备注</label> <input class=“input_base input_h30 col-1” name=“bz”></input> </view> </view> <view class=“btn_ok” bindtap=“powerDrawer” data-statu=“close”>确定</view> </view> 我这边把效果图放出来吧，需要的，自己看下面地址：http://wxapp.662p.com/thread-3713-1-1.html 这是效果图： [图片]

[图片] 之前使用纯transition实现动画时, 发现在部分手机上效果不是很好, 会有不流畅掉帧的现象! 现在换animation方法实现, 不知各位是否有什么高见, 大家一起交流交流 代码片段如下 https://developers.weixin.qq.com/s/pEBv6emG7Cdt

#1 在网页制作中，我们经常需要根据业务需求在网页中不同位置展示滚动消息。 比如，新下单用户、抢购、秒杀等。 在网页中制作滚动消息有很多种实现方式，那么在小程序里面我们可以复用这些方式吗？ 答案是：可以的，但没必要。 为什么呢？ 因为网页中制作滚动消息效果都会用到JS， 而在小程序中我们可以直接使用原生组件 swiper 来实现滚动消息效果。 #2 在开始制作之前，我们先说说为什么不用JS？ 不用JS来实现主要是两个原因：   1、性能的原因，虽然小程序已为我们优化了很多，但总归是有一些损耗的。   2、JS 实现滚动消息效果要多写一些代码 （嘿嘿嘿） 上面讲了为什么不用JS而用 swiper，那接下来就讲讲 swiper 实现滚动消息效果的思路 其实非常简单，同样只需要两点就可以：   1、把 swiper 滚动方向改为垂直（如果你要实现的是左右方向的滚动消息，这一点都可省略）   2、在 swiper-item 上面盖一层 view 遮挡一下，避免用户手动去滚动消息。 #3 思路理好了，我们先画一下 view 之间的关系 [图片] 首先容器 view，来存放滚动消息遮罩层。 不要这个容器可以吗？ 答案是：可以的，但很麻烦。因为遮罩层需要用绝对定位来覆盖在滚动消息层上面，没有容器作为父级 view。遮罩层会出现期望外的效果。 然后是滚动消息层，也就是本文主角 swiper 组件。可以根据业务需要改变滚动方向、时间间隔、样式等。 最后就是遮罩层，主要是防止用户误点而触发 swiper。 #4 总算到了代码环节，开始之前我们先看看效果 [图片] 首先是 wxml  [图片] 然后是 wxss [图片] 最后是模拟数据  [图片] #5 到这里，在小程序中实现滚动消息就结束了。文中源码关注公众号回复 滚动消息 下载。如果你有其他疑问或者需求加我微信(qwertyax)一起交流 [图片]

之前一直都是用原生的tabbar但是自己使用的图标实在是太丑了，同时也想使用其他好看ui组件库做开发，我选用的是iview-weapp(直男审美)，今天主要说的是tabbar组件，首先使用方法也很简单在github链接https://github.com/TalkingData/iview-weapp把这个ui组件库下载下来，再把dist文件引入自己的项目中(dist文件跟pages文件同级)，好的这样就能使用iview-weapp组件库啦，接下来我们需要用到什么组件就在页面对应的.json文件里按需引入就可以了，下面我使用tabbar组件当个例子（建议打开这个链接https://weapp.iviewui.com/docs/guide/start看着文档操作） [图片] 然后我们在wxml文件里这样引用 [图片] 当然仅仅这样肯定还是不行的，我们还需要在js文件里这样写 [图片] 这个是默认值，默认选中的是第一个tabbar-item [图片] 这个是点击tabbar-item的时候获得选中的状态 好的这样我们项目里tabbar就能正常使用了但是问题来了，为啥文档没告诉我怎么跳转啊 [图片] 这也太难受了，百度了好久也没找到答案(这也是我写这个文章的目的，希望能帮助到大家)然后我就去看了微信小程序的开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html，看到Component 构造器这个东西貌似可以帮助我解决这个问题(文档还是很强的，建议多看)，下面是解决方法： 首先我们需要在pages目录下创建一个component目录 [图片] 然后在component目录下创建三个用来跳转的子页面(名字自己看着取) [图片] 子页面对应的.json文件需要这样写 [图片] 子页面对应的js文件需要这样写 var app = getApp(); Component({ /* 开启全局样式设置 */ options: { addGlobalClass: true, }, /* 组件的属性列表 */ properties: { name: { type: String, value: ‘cost’ } }, /* 组件的初始数据 */ data: { }, /* 组件声明周期函数 */ lifetimes: { attached: function () { [代码]}, moved: function () { }, detached: function () { }, [代码] }, /* 组件的方法列表 */ methods: { } }) 然后子页面对应的wxml与wxss页面就写需要的样式就行了。 接下来我们要在我们放tabbar组件的index.wxml文件里这样写 [图片] 使用hidden来判断显示我们创建的子页面(组件) 当然我们也还要在index.json引入我们的三个子页面 [图片] 这样我们的tabbar跳转就完成啦 成功案例： [图片] [图片] [图片] 这样的跳转页面也不会闪烁一下哦，如果你使用其他ui组件库用同样的方法也可以实现tabbar跳转呢，也可以自己写一个自定义tabbar(挺简单的)，很少发文有问题请指出，写的不好请见谅。 对了有些小伙伴说就是加载首页数据的时候 另外两个页面的数据也提前渲染了，有些业务逻辑是点击其他页面的时候页面的数据会刷新，我就不放代码上来了。提供个思路：下面的菜单按钮是可以监听的，可以用监听来解决，文档里有(多看文档)。