微信小程序抽獎組件

微信小程序抽獎組件

採用微信組件的方式提供，因組件內部使用了async/await，所以請在微信開發者工具"詳情=》本地設置 勾上 增強編譯和使用npm"，小程序npm使用方法請參考：微信小程序-npm支持

先看效果圖：

使用步驟：

• 步驟一：

  安裝依賴或前往githua下載源碼，拷貝dist目錄下的lottery-turntable目錄

  npm i lottery-turntable-for-wx-miniprogram
  

• 步驟二：

  頁面JSON配置

  {
    "usingComponents": {
      "lottery-turntable":"lottery-turntable-for-wx-miniprogram/lottery_turntable/index"
    }
  }
  

• 步驟三：

  準備數據和增加事件處理（使用組件頁面JS）

  const datas = [{
    "id": "792085712309854208",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金會員月卡 - 1"
  }, {
    "id": "766410261029724160",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金會員月卡 - 2"
  }, {
    "id": "770719340921364480",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金會員月卡 - 3"
  }, {
    "id": "770946438416048128",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金會員月卡 - 4"
  }, {
    "id": "781950121802735616",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金會員月卡 - 5"
  }, {
    "id": "766411654436233216",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金會員月卡 - 6"
  }, {
    "id": "770716883860332544",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金會員月卡 - 7"
  }, {
    "id": "796879308510732288",
    "imgUrl": "../../images/icon.png",
    "title": "迅雷白金會員月卡 - 8"
  }];
  
  Page({
    data: {
      datas: datas, // 數據 
      prizeId: '',  // 抽中結果id，通過屬性方式傳入組件
      config: { 		// 轉盤配置，通過屬性方式傳入組件
        titleLength: 7
      }
    },
    /**
     * 次數不足回調
     * @param e
     */
    onNotEnoughHandle(e) {
      wx.showToast({
        icon: 'none',
        title: e.detail
      })
    },
  
    /**
     * 抽獎回調
     */
    onLuckDrawHandle() {
      this.setData({
        prizeId: this.data.datas[Math.floor(Math.random() * 10 % this.data.datas.length)].id
      });
    },
  
    /**
     * 動畫旋轉完成回調
     */
    onLuckDrawFinishHandle() {
      const datas = this.data.datas;
      const data = datas.find((item) => {
        return item.id === this.data.prizeId;
      });
      wx.showToast({
        icon: 'none',
        title: `恭喜你抽中 ${data.title}`
      })
      this.setData({
        prizeId: ''
      });
    }
  })
  
  

• 步驟四：

  頁面使用

  <lottery-turntable
       data="{
      
      {datas}}"
       prize-id="{
      
      {prizeId}}"
       count="{
      
      {5}}"
       config="{
      
      {config}}"
       bindLuckDraw="onLuckDrawHandle"
       bindNotEnough="onNotEnoughHandle"
       bindLuckDrawFinish="onLuckDrawFinishHandle"
     ></lottery-turntable>
  

• 步驟五：

  更改組件配置項（以下爲默認配置），通過config屬性傳入一個js對象

  /**
   * ease: 取值如下
   * 'linear'  動畫從頭到尾的速度是相同的
   * 'ease'  動畫以低速開始，然後加快，在結束前變慢
   * 'ease-in'  動畫以低速開始
   * 'ease-in-out'  動畫以低速開始和結束
   * 'ease-out'  動畫以低速結束
   * 'step-start'  動畫第一幀就跳至結束狀態直到結束
   * 'step-end'  動畫一直保持開始狀態，最後一幀跳到結束狀態
   */
  // 以下爲默認配置
  let config = {
    size: {
      width: '572rpx',
      height: '572rpx'
    },                                      // 轉盤寬高
    bgColors: ['#FFC53F', '#FFED97'],       // 轉盤間隔背景色 支持多種顏色交替
    fontSize: 10,                           // 文字大小
    fontColor: '#C31A34',                   // 文字顏色
    titleMarginTop: 12,                     // 最外文字邊距
    titleLength: 6                          // 最外文字個數
    iconWidth: 29.5,                        // 圖標寬度
    iconHeight: 29.5,                       // 圖標高度
    iconAndTextPadding: 4,                  // 最內文字與圖標的邊距
    duration: 8000,                         // 轉盤轉動動畫時長
    rate: 1.5,                              // 由時長s / 圈數得到
    border: 'border: 10rpx solid #FEFAE4;', // 轉盤邊框
    ease: 'ease-out'                        // 轉盤動畫
  };