前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序转盘抽奖组件

小程序转盘抽奖组件

作者头像
别盯着我的名字看
发布2022-06-09 13:13:22
2.7K0
发布2022-06-09 13:13:22
举报
文章被收录于专栏:前端专栏前端专栏

项目地址

码云

效果图

使用方式

引入组件 .json

代码语言:javascript
复制
{
  "usingComponents": {
    "turnplate-lottery": "/components/turnplate-lottery/index"
  }
}

使用组件 .wxml

代码语言:javascript
复制
<turnplate-lottery id="turnplate" list="{{prizeList}}"></turnplate-lottery>
<button catchtap="onStartLottery">开始抽奖</button>

调用抽奖方法 .js

代码语言:javascript
复制
// 开始抽奖
onStartLottery(e) {
    const winIdx = 3; // 中奖索引(由接口返回),由0开始算,这表示会停留在第四个上
    this.selectComponent('#turnplate').start(winIdx, (res) => {
        console.log('转盘停止后的回调')
    })
}

重置方法 .js

代码语言:javascript
复制
// 转盘角度会重置到0度
this.selectComponent('#turnplate').reset();

属性说明

属性名

类型

默认值

说明

width

Number

680

转盘宽度(直径),单位rpx

list

Array

[]

奖品数据列表 [{name: ‘奖品名’, desc: ‘描述’, img: ‘奖品图’}, …]

fanColors

Array

[‘rgb(15, 95, 148)’]

扇形颜色,会循环获取

fanImage

String

扇形图片,如果有值,那么fanColors就失效了

turns

Number

5

转盘圈数,需要大于1

time

Number

0

转盘总耗时,单位ms,默认会根据圈数计算,必须大于1000ms

方法

方法名

说明

start

开始抽奖 start(idx, callback)

reset

重置转盘的调度 reset()

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-10-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 项目地址
  • 效果图
  • 使用方式
  • 属性说明
  • 方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档