更新记录

1.0.1(2024-07-29) 下载此版本

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

1.0.0(2024-07-28) 下载此版本

新增


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

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

属性名 类型 默认值 必填 说明
list Array null 当前要抽奖数据
prizeItem Number/Object 300 当前中奖数据
radius Number/String 325 转盘半径
disabled Boolean false 当前是否是禁用抽奖状态
delay Number 5 最多等待多少s,转到这个秒数如果发现还没有检查到中奖奖品数据,即判定为抽奖失败
itemColor Array ['#f38181', '#393e46'] 转盘奖品区是间隔颜色
itemTextStyle Object {} 奖品项的文本样式
borderColor String #FFBE04 转盘最外层圆边颜色
btnRadius Number/String 84 抽奖按钮半径
btnText String 点击抽奖 抽奖按钮文案
btnTextStyle Object {} 抽奖按钮文本样式
btnColor Array ['#ff2e63', '#FFBE04'] 抽奖按钮背景色和边框色
isPointerAni Boolean true 是否开启装饰点闪烁动画
pointColor Array ['white', #ff2e63'] 装饰点颜色,二个颜色切换

Event

事件名 说明 返回值
luckStart 抽奖开始触发的事件,主要是给使用默认UI用的,用于外面触发抽奖接口获取抽奖奖品
luckEnd 抽奖结束触发的事件 抽奖结果对象{ result: 抽奖结果, status: 抽奖状态 ok成功/error失败, reset: 抽奖重置方法爆露,用于外面重置抽奖 }

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问