微信小程序实现如上效果。
分为两个组件:
- PinTuan: 整体组件
- PinTuanHead: 每个头像组件
代码如下:
PinTuan.js
Component({
attached:function() {
// 获取头像地址数据,返回一个头像地址数组
notification.addObserver('你自己的消息事件', (config) => {
this._getServeHeadData(config);
}, this);
},
detached: function() {
this._stopInterval();
this._stopTimeOut();
},
ready: function() {
// 初始化适配rpx
this._initRpx();
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
personNum: 1,
successedImg: 'XXX.png',
joinText: "即将成团",
clockText: "00:00:00", // 倒计时文字初始值
headsArr: [], // 所有头像url地址库
headUrls: [], // 头像url数组
moveHead: '', // 头像飞动图片
headAniData: {}, // 头像动画animation
successAni: {}, // 成功动画animation
pinTuanAni: {}, // 拼团整体上滚刷新animation
headAniOrigin: true, // 头像飞动动画是否归位
successAniOrigin: true, // 成功动画是否归位
pinTuanAniOrigin: true, // 拼团组件动画是否归位
pinTuanSuccess: false, // 拼团成功图标显示
countDownSeedTimer: 10, // 倒计时最小随机数,也是拼团成功最大时间随机数
pinTuanMinSeedTimer: 3, // 拼团最小随机时间
maxHour: 8, // 倒计时随机最大小时
},
/**
* 组件的方法列表
*/
methods: {
_getServeHeadData: function(config) {
console.log('check config = ', config)
// 初始化服务器配置
if (!config.recent) return;
const recent = config.recent;
this.setData({
headsArr: recent,
});
this._updateHeadAni();
this._updateCountDown();
},
_initRpx: function() {
// 适配屏幕移动距离
wx.getSystemInfo({
success: res => {
let rpx = 1 * (res.windowWidth * res.pixelRatio) / (375 * res.pixelRatio);
this.setData({
rpx: rpx
});
},
})
},
_randomCountDownTime: function(time) {
if (time < 0) {
this._stopInterval();
return;
}
let hour = Math.floor(time / 3600) % 10;
let minute = Math.floor((time / 60) % 60);
let second = Math.floor(time % 60);
let timeStr = '0' + hour + ':' + (minute < 10 ? ('0' &