支付寶小程序營銷組件 大轉(zhuǎn)盤·wheel-draw

通過點擊轉(zhuǎn)盤中心按鈕轉(zhuǎn)動轉(zhuǎn)盤，進(jìn)行抽獎，可以自定義轉(zhuǎn)盤轉(zhuǎn)動抽獎的次數(shù)。

更多詳細(xì)信息請參見 代碼市場。

掃碼體驗

示例代碼

安裝

npm i ant-mini-wheel-draw --save

注冊

//.json
{
  "usingComponents": {
    "wheel": "ant-mini-wheel-draw/es/wheel/index"
  }
}

調(diào)用

<!-- .axml -->
<view class="container">
  <wheel
    width="22em"
    prizeList="{{prizeList}}" // 獎項列表
    prizeName="{{prizeName}}" // 獲獎項目名稱
    rotTimes="{{totalTimes}}" // 轉(zhuǎn)盤機會次數(shù)
    onStart="onStart" // 轉(zhuǎn)盤開始旋轉(zhuǎn)回調(diào)
    onFinish="onFinish" // 轉(zhuǎn)盤結(jié)束旋轉(zhuǎn)回調(diào)
  />
  <view class="times">
    <text>你還有{{totalTimes - curTimes}}次抽獎機會</text>
  </view>
  <view class="result">
    <text>{{result}}</text>
  </view>
</view>undefined

// .js
Page({
  data: {
    prizeList: [
      {
        name: 'H&M100元優(yōu)惠券',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/nIQUKeYBbJWliGJVhVmx.png'
      }, {
        name: '2元話費券',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/HkrVjjjuxZPUMCUbPazb.png'
      }, {
        name: '45元飛豬出行券',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/cDctUxwBLPCszQHRapYV.png'
      }, {
        name: 'H&M10元優(yōu)惠券',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/FAmIWZAWpUwlRFKqQDLz.png'
      }, {
        name: '2元流量券',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/cuGomeXzMyeeZMjvVjBj.png'
      }, {
        name: '未中獎',
        img: 'https://zos.alipayobjects.com/rmsportal/dwhgPyWAcXuvJAWlSSgU.png'
      }
    ],
    prizeName: '2元話費券',
    totalTimes: 2,
    curTimes: 0,
    result: '',
  },
  /*
    @param name 獲獎項名字
    @param times 當(dāng)前轉(zhuǎn)動次數(shù)
  */
  onStart (name, times) {
    // 轉(zhuǎn)盤開始轉(zhuǎn)動
    this.setData({
      result: `第${times}次抽獎中，請稍候...`,
      curTimes: times++
    })
  },
  /*
    @param name 獲獎項名字
    @param times 當(dāng)前轉(zhuǎn)動次數(shù)
  */
  onFinish (name, times) {
    // 轉(zhuǎn)盤結(jié)束轉(zhuǎn)動
     this.setData({
      result: name === '未中獎' ? '很遺憾，差點就中獎了' : `恭喜你，獲得${name}`,
      prizeName: this.data.prizeList[Math.floor(Math.random() * 6)].name,
    })
  }
});undefined

屬性