codecamp

支付宝小程序营销组件 摇骰子·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 -
支付宝小程序营销组件 砸金蛋·hit-eggs
支付宝小程序营销组件 翻牌抽奖·flip-draw
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }