Weex 版本的红包雨游戏
<template> <wxc-lottery-rain :config="config" :pic-list="images" ref="wxc-lottery-rain" :wrap-style="wrapStyle" @wxcLotteryRainCaught="wxcLotteryRainCaught"></wxc-lottery-rain> </template> <style scoped> </style> <script> import { WxcLotteryRain } from 'weex-ui'; export default { components: { WxcLotteryRain }, data: () => ({ images: [ 'https://img.alicdn.com/tfs/TB1sZPlb5IRMeJjy0FbXXbnqXXa-241-206.png', 'https://img.alicdn.com/tfs/TB1eCbwb3MPMeJjy1XcXXXpppXa-241-206.png', 'https://img.alicdn.com/tfs/TB1rDTjb3MPMeJjy1XdXXasrXXa-241-206.png', 'https://img.alicdn.com/tfs/TB1Nw2sb3MPMeJjy1XbXXcwxVXa-241-206.png', 'https://img.alicdn.com/tfs/TB1hCbwb3MPMeJjy1XcXXXpppXa-241-206.png' ], config: { intervalTime: 450, hideAniTime: 300, showAniTime: 300, showTime: 450, randomTime: 300, width: 241, height: 206 }, wrapStyle: { backgroundColor: 'rgba(133, 11, 11, .7)' } }), methods: { wxcLotteryRainCaught (e) { // console.log(e.rainId) } } } </script>
更详细代码可以参考 demo
Prop | Type | Required | Default | Description |
---|---|---|---|---|
pic-list | Array | Y | [] | 定制化图片配置 |
config | Object | N | {} | 红包雨 相关配置 |
wrap-style | Object | N | {} | 容器样式自定义 |
//被抓住时候的一个回调 @wxcLotteryRainCaught="wxcLotteryRainCaught" 同时e.rainId为被抓住的id
我们在游戏结束或者用户切走时候建议销毁红包雨
动画、定时器等影响性能的东西,此处提供方法为:
//绑定wxc-lottery-rain组件的 ref="wxc-lottery-rain" //调用内部方法destroy进行销毁 this.$refs['wxc-lottery-rain'].destroy();