Skip to content

大转盘在 ios上转起来一卡一卡的 #557

@sunshines233

Description

@sunshines233

大转盘在 ios上转起来一卡一卡的,我直接用的 demo代码
import React from 'react'
import { LuckyWheel } from '@lucky-canvas/taro/react'

export default class Index extends React.Component {
constructor () {
super()
this.myLucky = React.createRef()
this.state = {
blocks: [{ padding: '13px', background: '#617df2' }],
prizes: [
{ fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
{ fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
{ fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
{ fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
{ fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
{ fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
],
buttons: [
{ radius: '50px', background: '#617df2' },
{ radius: '45px', background: '#afc8ff' },
{
radius: '40px', background: '#869cfa',
pointer: true,
fonts: [{ text: '开始\n抽奖', top: '-20px' }]
},
],
}
}
render () {
return <LuckyWheel
ref={this.myLucky}
width='300px'
height='300px'
blocks={this.state.blocks}
prizes={this.state.prizes}
buttons={this.state.buttons}
onStart={() => { // 点击抽奖按钮会触发star回调
// 调用抽奖组件的play方法开始游戏
this.myLucky.current.play()
// 模拟调用接口异步抽奖
setTimeout(() => {
// 假设后端返回的中奖索引是0
const index = 0
// 调用stop停止旋转并传递中奖索引
this.myLucky.current.stop(index)
}, 2500)
}}
onEnd={prize => { // 抽奖结束会触发end回调
console.log(prize)
}}
>
}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions