微信小程序抽獎組件的使用步驟

更新時間：2021年01月11日 10:03:52 作者：い狂奔的蝸牛

這篇文章主要給大家介紹了關(guān)于微信小程序抽獎組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

采用微信組件的方式提供，因組件內(nèi)部使用了async/await，所以請在微信開發(fā)者工具"詳情=》本地設置勾上增強編譯和使用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"
 }
}

步驟三：

準備數(shù)據(jù)和增加事件處理（使用組件頁面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, // 數(shù)據(jù) 
  prizeId: '', // 抽中結(jié)果id，通過屬性方式傳入組件
  config: { 		// 轉(zhuǎn)盤配置，通過屬性方式傳入組件
   titleLength: 7
  }
 },
 /**
  * 次數(shù)不足回調(diào)
  * @param e
  */
 onNotEnoughHandle(e) {
  wx.showToast({
   icon: 'none',
   title: e.detail
  })
 },
 
 /**
  * 抽獎回調(diào)
  */
 onLuckDrawHandle() {
  this.setData({
   prizeId: this.data.datas[Math.floor(Math.random() * 10 % this.data.datas.length)].id
  });
 },
 
 /**
  * 動畫旋轉(zhuǎn)完成回調(diào)
  */
 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' 動畫以低速開始，然后加快，在結(jié)束前變慢
 * 'ease-in' 動畫以低速開始
 * 'ease-in-out' 動畫以低速開始和結(jié)束
 * 'ease-out' 動畫以低速結(jié)束
 * 'step-start' 動畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束
 * 'step-end' 動畫一直保持開始狀態(tài)，最后一幀跳到結(jié)束狀態(tài)
 */
// 以下為默認配置
let config = {
 size: {
  width: '572rpx',
  height: '572rpx'
 },                   // 轉(zhuǎn)盤寬高
 bgColors: ['#FFC53F', '#FFED97'],    // 轉(zhuǎn)盤間隔背景色 支持多種顏色交替
 fontSize: 10,              // 文字大小
 fontColor: '#C31A34',          // 文字顏色
 titleMarginTop: 12,           // 最外文字邊距
 titleLength: 6             // 最外文字個數(shù)
 iconWidth: 29.5,            // 圖標寬度
 iconHeight: 29.5,            // 圖標高度
 iconAndTextPadding: 4,         // 最內(nèi)文字與圖標的邊距
 duration: 8000,             // 轉(zhuǎn)盤轉(zhuǎn)動動畫時長
 rate: 1.5,               // 由時長s / 圈數(shù)得到
 border: 'border: 10rpx solid #FEFAE4;', // 轉(zhuǎn)盤邊框
 ease: 'ease-out'            // 轉(zhuǎn)盤動畫
};