wxc-lottery-rain

wxc-lottery-rain

Cat-Cat

Rule

• Usually used in marketing campaigns, similar to cat-cat or groundhog.
• The element image and container style can be configured to match the current activity atmosphere.

Demo

    

Code Example

<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>

More details can be found in here

API

Prop	Type	Required	Default	Description
pic-list	Array	Y	[]	a group of cat pictures
config	Object	N	{}	game config
wrap-style	Object	N	{}	wrap style

Caught Event

@wxcLotteryRainCaught="wxcLotteryRainCaught"
// will return id

Destroy Event

When users leave the game, We need destroy the game

//<wxc-lottery-rain ref="wxc-lottery-rain"></wxc-lottery-rain>
this.$refs['wxc-lottery-rain'].destroy();