支付寶小程序營銷組件 翻牌抽獎·flip-draw

頁面上有 N 張卡牌，每張卡牌對應不同獎品，用戶點擊卡牌進行翻牌抽獎。開發(fā)者可自定義卡牌數(shù)量和翻牌的次數(shù)。

更多詳細信息請參見 代碼市場。

掃碼體驗

示例代碼

安裝

npm i ant-mini-flip-draw --save

注冊

//.json
{
  "usingComponents": {
    "flipdraw": "ant-mini-flip-draw/component/index"
  }
}

調用

<!-- .axml -->
<view>
<flipdraw
    prizeList="{{prizeList}}"
    prizeName="{{prizeName}}"
    isDrawing="{{isDrawing}}"
    flipAllCards="{{flipAllCards}}"
    onFlipStart="onFlipStart"
  />
</view>

//.js
Page({
  data: {
    docParamsImg: "https://img.alicdn.com/tfs/TB1sfaaJSzqK1RjSZFHXXb3CpXa-1326-846.png",
    prizeList: [
      {
      'name': '謝謝參與1',
      'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
      },
      {
      'name': '666元紅包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/nxpXbcNBOmbeIOVCUsuS.png'
      },
      {
      'name': '1元紅包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/RxQruKQwiQCeYXhvwCfP.png'
      },
      {
      'name': '3元紅包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/tyMAYvTdjRFOVxqWVhsj.png'
      },
      {
      'name': '謝謝參與2',
      'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
      },
      {
      'name': '1元紅包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/RxQruKQwiQCeYXhvwCfP.png'
      },
      {
      'name': '謝謝參與3',
      'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
      },
      {
      'name': '5元紅包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/qanDEFeGBoiPflYxkhJY.png'
      }
    ],
    cardBgImg: 'https://gw.alicdn.com/tfs/TB1P.AMXMHqK1RjSZJnXXbNLpXa-610-600.png',
    prizeName: '',
    flipAllCards: false,
    isDrawing: false,
  },
  onFlipStart() {
    console.log('開始了，這個時候最好頁面控制下 loading 狀態(tài)，組件內不做控制');
    this.setData({
      isDrawing: true, // 修改抽獎狀態(tài)，防止重復點擊多次請求
    });
    // 開始抽獎
    setTimeout(() => {
      console.log('拿到結果，設置獎品信息');
      if (Math.random() > 0.3) {
        this.setData({
          prizeName: '666元紅包',
          isDrawing: false,
        });
      } else {
        this.setData({
          isDrawing: false, // 抽獎結束一定要還原 isDrawing 狀態(tài)
        });
      }
      this.showResultDialog()
    }, 1000);
  },
  showResultDialog() {
    // do something
    this.setData({
      flipAllCards: true, // 將剩下未翻過的牌自動翻，展示獎品結果。
    })
  }
});undefined

屬性

注意

• 請求前一定要設置 isDrawing = true，請求結束后一定要設置 isDrawing = false；
• cardHeight 卡片高度是相對 750 視覺稿設置的，寬高默認 210x210rpx。寬度固定，高度可變。比如 210x300 的圖片，cardHeight 就設置為 300；如果是 200x250 的圖片需要等比轉換一下，cardHeight = 210 * (250/200)。