微信小程序的抽红包组件，小编一共是做了两种，第一种呢用了很长时间了，可能是时间长了，觉得不是那么霸气了，就重新又制作了一个，第一个当时使用了大量的图片，这也导致了加载的时候很慢，这里面的主要样式还是参考的别人的代码，总而言之效果还是不错的，不过现在呢，小编又自己写了个抽红包的组件，这回看上去比较好看了，首先我们先看下2.0代码吧。因为是放在具体项目里面的，有些细节性的东西大家可以改改：
首先是wxml，大部分的样式也写在了这里面：
<view style="position: fixed; top: 0; left: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 100000000000000000000; background: rgba(0, 0, 0, 0.4);">
<view class="{{open ? 'red-packet-open' : ''}}" style="background: #ff3d32; border-radius: 30rpx; border-bottom-right-radius: 100% 120px; border-bottom-left-radius: 100% 120px; box-shadow: 0px 3px 5px 1px #e92c27; width: 590rpx; height: 700rpx; position: absolute; top: 80rpx; z-index: 101;">
<view wx:if="{{name}}" style="color: #F5B37B; text-align: center; font-size: 40rpx; padding-top:100rpx;">{{name}}的红包</view>
<view wx:if="{{text}}" style="color: #F5B37B; text-align: center; font-size: 30rpx; padding-top:60rpx;">{{text}}</view>
<view style="position: absolute; bottom: -80rpx; left: 220rpx; background: #E8bF7B; width: 150rpx; height: 150rpx; line-height: 150rpx; text-align: center; border-radius: 75rpx; font-size: 60rpx;" bindtap="handleOpen">抽</view>
</view>
<view class="{{open ? 'red-packet-open' : ''}}" style="background: #ff3328; border-radius: 30rpx; border-top-right-radius: -120px; border-top-left-radius: -120px; width: 590rpx; height: 464rpx; position: absolute; top: 500rpx; z-index: 100;"></view>
<view style="width: 590rpx; height: 883rpx; position: absolute; top: 80rpx; z-index: 90; background: #FFFFFF; border-radius: 30rpx;">
<view style="height: 260rpx; border-radius: 30rpx; border-bottom-right-radius: 100% 120px; border-bottom-left-radius: 100% 120px; background: #ff3d32; display: flex; flex-direction: column; justify-content: center; align-items: center;text-align: center;">
<image mode="aspectFill" src="{{user?user.avatar : ''}}" style="width: 130rpx; height: 130rpx; min-width: 130rpx; min-height: 130rpx; border-radius: 65rpx; position: absolute; top: 180rpx;" />
<view style="position: absolute; top: 0; right: 20rpx; color: #FFFFFF; font-size: 56rpx;" bind:tap="close">X</view>
</view>
<view style="display: flex; flex-direction: column; justify-content: center; align-items: center;text-align: center; font-size: 26rpx; margin: 60rpx;">
<text style="color: #f33035; font-size: 40rpx;">{{title}}</text>
<text style="padding: 10rpx; color: #f33035; font-size: 50rpx;">{{msg}}</text>
<view style="text-align: center; font-size: 30rpx; margin: 20rpx;">{{tips}}</view>
<view wx:if="{{balance}}" bind:tap="toBalance" style="text-align: center; font-size: 30rpx; margin: 20rpx; color: #f33035; padding-top: 60rpx;"><text wx:if="{{balance_name}}">{{balance_name}}</text>余额：{{balance}}>>
</view>
</view>
</view>
</view>
在wxss里面实现了一个动画：
.red-packet-open {
animation: open-up 0.2s ease-in-out 0.2s 1 normal;
animation-fill-mode: forwards;
display: none;
}
在js里面就是相关的逻辑了
const audio = wx.createInnerAudioContext()
audio.src = 'https://audiosrc.shangpo.net/sources/coin.mp3'
let g = getApp().globalData;
Component({
properties: {
title: {
type: String,
value: null
},
msg: {
type: String,
value: null
},
tips: {
type: String,
value: null
},
bind: {
type: Boolean,
value: true,
},
open: {
type: Boolean,
value: false
},
amount_ui: {
type: String,
value: null
},
name: {
type: String,
value: null
},
text: {
type: String,
value: null
},
user: {
type: Object,
value: g.user
},
balance: {
type: String,
value: null
},
balance_name: {
type: String,
value: null
}
},
data: {
},
methods: {
handleOpen() {
var that = this
if (that.data.bind) {
that.setData({
title: that.data.title,
msg: that.data.msg,
bind: false,
// 以下两项为测试页面使用
// tips: that.data.tips,
// open: true,
})
audio.play()
this.triggerEvent('choujiang', {})
}
},
close() {
this.triggerEvent('close_redpacket', {})
},
toBalance(){
this.triggerEvent('toBalance', {})
}
}
})
1.0版本的基本上就是样式上的不一样，小编在这里就不列出来了，有需要的可以单独联系小编。
