背景:
每逢假节日 红包雨(福袋雨)营销活动因与用户互动性高,所以比较常见。用的频率较高,因此抽象出来一个插件。提高前端编码及快速迭代上线效率。
支持程度:
原生 js 实现,可支持跨框架(vue,react等)(微信小程序除外,小程序不存在dom,无法支持dom操作api)。
可直接script引用,也可import引入,具体请看使用说明。
你可通过传入的参数来控制红包雨时长,红包雨下降速度,红包图片等,定制符合你的业务场景!~
效果图:
使用说明:
# 使用方式 1(支持 import 项目):
更改:
red-wrap-rain.js 文件将 RedWrapRain 类 export 暴露出去
`export default class RedWrapRain extends Img{}`
引入:
`import RedWrapRain from './redWrapRain/red-wrap-rain.js';`
需要调用的地方 定义关于红包雨的参数,实例化红包雨类,传入红包雨完毕后的回调处理函数
` let params = {};
let rwr = new RedWrapRain(params);
rwr.start((redPacketsCount) => {
// console.log('回调红包个数', redPacketsCount);
});
`
# 使用方式 2(原生写法):
引入:
`<script src="./redWrapRain/red-wrap-rain.js"></script>`
传参并实