最近项目中遇到了需要做个h5的抽奖活动需求:要求支持九宫格模式和圆形抽奖盘模式。这边基于vue和vantUI的loading组件造了这2个轮子。
九宫格抽奖
-
思路
动态构造几次方的正方形抽键盘的4条边;
requestAnimationFrame来控制动画执行过程。 -
重点过程
- requestAnimationFrame初始化兼容性
// 兼容性raf初始化
window.requestAniFrame = (function() {
return window.requestAnimationFrame
// Older versions Chrome/Webkit
window.webkitRequestAnimationFrame ||
// Firefox < 23
window.mozRequestAnimationFrame ||
// opera
window.oRequestAnimationFrame ||
// ie
window.msRequestAnimationFrame ||
function(callback) {
return window.setTimeout(callback, 1000 / 60)
}
})()
// 兼容性取消初始化
window.cancelAnimation = (function() {
return (
window.cancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.cancelRequestAnimationFrame ||
function(id) {
clearTimeout(id)
}
)
})()
- 根据传入的奖品项判断当前是几次方正方形(一个正方形有4条边有4个顶点这个是死的)
DINGDIAN:4,
BIAN:4
// 获取几次幂方阵
this.firstTurn = (this.ds.length + this.DINGDIAN) / this.BIAN
// 获取画第二条边 最多可画几个
this.secondNeedNumber = this.firstTurn - 1
- v-for下动态构造4条边
// 获取位置
getPosition(index, isSelect) {
// 选中样式
let selectStyle = ``
if (isSelect) {
const selectWidth = this.tWidth - 4
const selectHeight = this.tHeight - 4
selectStyle = `width:${
px2vw(selectWidth)};height:${
px2vw(
selectHeight
)};border:${
px2vw(2)} solid ${
this.turnBackground}`
}
// 第一条边 index 0 1 2
if (index < this.firstTurn) {
let i = index - 0 * (this.firstTurn - 1)
return `top:0;left:${
px2vw(i * this.tWidth)};${
this.commonStyle
};${
selectStyle}`
}
// 第二条边 index值从 3 4
if (index - this.firstTurn < this.secondNeedNumber) {
let i = index - 1 * (this.firstTurn - 1)
return `top:${
px2vw(i * this.tWidth)};left:${
px2vw(this.abWidth)};${
this.commonStyle
};${
selectStyle}`
}
// 第三条边 5 6
if (index <=