更新记录

1.0.1（2024-07-29） 下载此版本

增加isPointerAni/pointerColor装饰点相关的配置

1.0.0（2024-07-28） 下载此版本

新增

平台兼容性

uni-app

uni-app x

hbxw-wheel-lottery组件

介绍

纯css实现的转盘抽奖组件，通过修改配置可以生成自己满意的抽奖转盘

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view class="container">
        <hbxw-wheel-lottery 
      :list="list"
      :prizeItem="prize"
      @luckStart="luckStart"
      @luckEnd="luckEnd"
    />

    <hbxw-wheel-lottery
      :list="list"
      :prizeItem="prize0"
      :itemColor="['red','blue']"
      borderColor="yellow"
      :btnTextStyle="{color: 'yellow'}"
      :itemTextStyle="{color: 'yellow'}"
      @luckStart="luckStart0"
      @luckEnd="luckEnd"
    />
    </view>
</template>

<script>
    export default {
        data() {
            return {
        prize: null,
        prize0: null,
                list: [
          {
            name: '奖品0',
            id: 0,
            image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品0'
          },
          {
            name: '奖品1',
            id: 1,
            image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品1'
          },
          {
            name: '奖品2',
            id: 2,
            image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品2'
          },
          {
            name: '奖品3',
            id: 3,
            image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品3'
          },
          {
            name: '奖品4',
            id: 4,
            image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品4'
          },
          {
            name: '奖品5',
            id: 5,
            image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品5'
          },
          {
            name: '奖品6',
            id: 6,
            image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品6'
          },
          {
            name: '奖品7',
            id: 7,
            image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品7'
          },
          {
            name: '奖品8',
            id: 8,
            image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品8'
          },
          {
            name: '奖品9',
            id: 9,
            image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品9'
          },
        ]
            }
        },
        methods: {
            luckStart() {
        setTimeout(() => {
          this.prize = this.list[4];
        }, 2000)
      },
            luckStart0() {
        setTimeout(() => {
          this.prize0 = this.list[6];
        }, 3000)
      },
      luckEnd(e) {
        if (e.result && e.status) {
          uni.showToast({
            title: `恭喜抽中${e.result.name}`,
            icon: 'none',
          })
        }
        setTimeout(() => {
          e.reset();
        }, 2000);
      }
        },
    mounted() {
     console.log('---- storage_key ----:', uni.getStorageSync('storage_key'), typeof uni.getStorageSync('storage_key'));
    }
    }
</script>

<style lang="scss" scoped>
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

API

Props

Event

注：包体积偏大是因为有示例图片,真正会打包到项目中的体积是很小的