您好,登錄后才能下訂單哦!
如何使用微信小程序抽獎(jiǎng)組件?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
使用步驟:
步驟一:
安裝依賴或前往githua下載源碼,拷貝dist目錄下的lottery-turntable目錄
npm i lottery-turntable-for-wx-miniprogram
步驟二:
頁面JSON配置
{ "usingComponents": { "lottery-turntable":"lottery-turntable-for-wx-miniprogram/lottery_turntable/index" } }
步驟三:
準(zhǔn)備數(shù)據(jù)和增加事件處理(使用組件頁面JS)
const datas = [{ "id": "792085712309854208", "imgUrl": "../../images/icon.png", "title": "迅雷白金會(huì)員月卡 - 1" }, { "id": "766410261029724160", "imgUrl": "../../images/icon.png", "title": "迅雷白金會(huì)員月卡 - 2" }, { "id": "770719340921364480", "imgUrl": "../../images/icon.png", "title": "迅雷白金會(huì)員月卡 - 3" }, { "id": "770946438416048128", "imgUrl": "../../images/icon.png", "title": "迅雷白金會(huì)員月卡 - 4" }, { "id": "781950121802735616", "imgUrl": "../../images/icon.png", "title": "迅雷白金會(huì)員月卡 - 5" }, { "id": "766411654436233216", "imgUrl": "../../images/icon.png", "title": "迅雷白金會(huì)員月卡 - 6" }, { "id": "770716883860332544", "imgUrl": "../../images/icon.png", "title": "迅雷白金會(huì)員月卡 - 7" }, { "id": "796879308510732288", "imgUrl": "../../images/icon.png", "title": "迅雷白金會(huì)員月卡 - 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 }) }, /** * 抽獎(jiǎng)回調(diào) */ onLuckDrawHandle() { this.setData({ prizeId: this.data.datas[Math.floor(Math.random() * 10 % this.data.datas.length)].id }); }, /** * 動(dòng)畫旋轉(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>
步驟五:
更改組件配置項(xiàng)(以下為默認(rèn)配置),通過config屬性傳入一個(gè)js對(duì)象
/** * ease: 取值如下 * 'linear' 動(dòng)畫從頭到尾的速度是相同的 * 'ease' 動(dòng)畫以低速開始,然后加快,在結(jié)束前變慢 * 'ease-in' 動(dòng)畫以低速開始 * 'ease-in-out' 動(dòng)畫以低速開始和結(jié)束 * 'ease-out' 動(dòng)畫以低速結(jié)束 * 'step-start' 動(dòng)畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束 * 'step-end' 動(dòng)畫一直保持開始狀態(tài),最后一幀跳到結(jié)束狀態(tài) */ // 以下為默認(rèn)配置 let config = { size: { width: '572rpx', height: '572rpx' }, // 轉(zhuǎn)盤寬高 bgColors: ['#FFC53F', '#FFED97'], // 轉(zhuǎn)盤間隔背景色 支持多種顏色交替 fontSize: 10, // 文字大小 fontColor: '#C31A34', // 文字顏色 titleMarginTop: 12, // 最外文字邊距 titleLength: 6 // 最外文字個(gè)數(shù) iconWidth: 29.5, // 圖標(biāo)寬度 iconHeight: 29.5, // 圖標(biāo)高度 iconAndTextPadding: 4, // 最內(nèi)文字與圖標(biāo)的邊距 duration: 8000, // 轉(zhuǎn)盤轉(zhuǎn)動(dòng)動(dòng)畫時(shí)長(zhǎng) rate: 1.5, // 由時(shí)長(zhǎng)s / 圈數(shù)得到 border: 'border: 10rpx solid #FEFAE4;', // 轉(zhuǎn)盤邊框 ease: 'ease-out' // 轉(zhuǎn)盤動(dòng)畫 };
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。