wxc-lottery-rain

Weex 版本的红包雨游戏

规则

  • 通常在营销活动中使用，类似于捉猫猫、打地鼠这种场景
  • 元素图片、容器样式可以配置中成当前活动氛围一致

Demo

wxc-lottery-rain 红包雨 - 图1 wxc-lottery-rain 红包雨 - 图2

使用方法

  1. <template>
  2.   <wxc-lottery-rain :config="config"
  3.                     :pic-list="images"
  4.                     ref="wxc-lottery-rain"
  5.                     :wrap-style="wrapStyle"
  6.                     @wxcLotteryRainCaught="wxcLotteryRainCaught"></wxc-lottery-rain>
  7. </template>
  9. <style scoped></style>
  11. <script>
  12.   import { WxcLotteryRain } from 'weex-ui';
  13.   export default {
  14.     components: { WxcLotteryRain },
  15.     data: () => ({
  16.       images: [
  17.        'https://img.alicdn.com/tfs/TB1sZPlb5IRMeJjy0FbXXbnqXXa-241-206.png',
  18.        'https://img.alicdn.com/tfs/TB1eCbwb3MPMeJjy1XcXXXpppXa-241-206.png',
  19.        'https://img.alicdn.com/tfs/TB1rDTjb3MPMeJjy1XdXXasrXXa-241-206.png',
  20.        'https://img.alicdn.com/tfs/TB1Nw2sb3MPMeJjy1XbXXcwxVXa-241-206.png',
  21.        'https://img.alicdn.com/tfs/TB1hCbwb3MPMeJjy1XcXXXpppXa-241-206.png'
  22.       ],
  23.       config: {
  24.         intervalTime: 450,
  25.         hideAniTime: 300,
  26.         showAniTime: 300,
  27.         showTime: 450,
  28.         randomTime: 300,
  29.         width: 241,
  30.         height: 206
  31.       },
  32.       wrapStyle: {
  33.         backgroundColor: 'rgba(133, 11, 11, .7)'
  34.       }
  35.     }),
  36.     methods: {
  37.       wxcLotteryRainCaught (e) {
  38.         // console.log(e.rainId)
  39.       }
  40.     }
  41.   }
  42. </script>

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
pic-list Array Y [] 定制化图片配置
config Object N {} 红包雨 相关配置
wrap-style Object N {} 容器样式自定义

事件回调

  1. //被抓住时候的一个回调
  2. @wxcLotteryRainCaught="wxcLotteryRainCaught"
  3. 同时e.rainId为被抓住的id

销毁api

我们在游戏结束或者用户切走时候建议销毁红包雨动画、定时器等影响性能的东西，此处提供方法为：

  1. //绑定wxc-lottery-rain组件的 ref="wxc-lottery-rain"
  2. //调用内部方法destroy进行销毁
  3. this.$refs['wxc-lottery-rain'].destroy();

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-lottery-rain/