支付宝小程序营销组件 摇骰子·dice-roller
用户点击按钮或者摇动手机进行摇骰子,根据出现的点数进行相应抽奖,可以摇动多次。
更多详细信息请参见 代码市场。
扫码体验
示例代码
安装
npm i ant-mini-dice-roller --save
注册
//.json
{
"usingComponents": {
"diceroller": "ant-mini-dice-roller/es/component/index"
}
}
调用
<!-- .axml -->
<view class="container">
<diceroller
clickMode="true"
awardImg="{{awardImg}}"
onStart="onStart"
onFinish="onFinish"
>
<view slot="button">外部组件摇一摇按钮</view>
</diceroller>
<view class='tip-text'>{{tipText}}</view>
</view>
//.js
var toast = function(title) {
my.showToast({
type: 'success',
content: title,
duration: 1000,
});
}
Page({
data: {
awardImg: '',
awardName: '',
tipText: '',
},
onStart() {
toast('开始摇')
this.setData({
tipText: '正在抽奖...'
});
setTimeout(() => {
this.setData({
awardImg: 'https://gw.alicdn.com/tfs/TB1JsqGbHPpK1RjSZFFXXa5PpXa-289-298.png',
awardName: '1等奖'
})
}, 2000);
},
onFinish() {
toast('摇完啦')
this.setData({
tipText: `抽奖结果:${this.data.awardName}`
});
}
});undefined
属性
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
width | 组件宽度(rpx)。 | Number | 318 |
height | 组件高度(rpx)。 | Number | 300 |
background | 背景色。 | String | #FFF |
rollTime | 摇骰子时间(毫秒)。 | Number | 3000 |
rollImg | 摇奖时逐帧图片。 | String | 查看 |
initImg | 初始化骰子图片。 | String | 查看 |
onStart | 开始回调。 | Func | - |
onFinish | 结束回调。 | Func | - |