亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序?qū)崿F(xiàn)幸運(yùn)大轉(zhuǎn)盤(pán)功能的示例代碼

 更新時(shí)間:2022年03月05日 09:12:54   作者:失散多年的哥哥  
這篇文章主要介紹了如何在微信小程序中實(shí)現(xiàn)幸運(yùn)大轉(zhuǎn)盤(pán)功能,參與用戶點(diǎn)擊抽獎(jiǎng)便可抽取輪盤(pán)的獎(jiǎng)品,感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試

一、項(xiàng)目展示

幸運(yùn)大轉(zhuǎn)盤(pán)是一個(gè)簡(jiǎn)單的抽獎(jiǎng)小程序

參與用戶點(diǎn)擊抽獎(jiǎng)便可抽取輪盤(pán)的獎(jiǎng)品

二、抽獎(jiǎng)頁(yè)

抽獎(jiǎng)頁(yè)是一個(gè)大輪盤(pán)和活動(dòng)規(guī)則

頁(yè)面形式簡(jiǎn)單

主要核心在于輪盤(pán)

核心代碼【輪盤(pán)旋轉(zhuǎn)】如下:

 getLottery: function () {
    var that = this
    var awardIndex = Math.random() * 6 >>> 0;

    // 獲取獎(jiǎng)品配置
    var awardsConfig = app.awardsConfig,
        runNum = 8
    if (awardIndex < 2) awardsConfig.chance = false
    console.log(awardIndex)



    // 旋轉(zhuǎn)抽獎(jiǎng)
    app.runDegs = app.runDegs || 0
    console.log('deg', app.runDegs)
    app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / 6))
    console.log('deg', app.runDegs)

    var animationRun = wx.createAnimation({
      duration: 4000,
      timingFunction: 'ease'
    })
    that.animationRun = animationRun
    animationRun.rotate(app.runDegs).step()
    that.setData({
      animationData: animationRun.export(),
      btnDisabled: 'disabled'
    })

   // 繪制轉(zhuǎn)盤(pán)
    var awardsConfig = app.awardsConfig.awards,
        len = awardsConfig.length,
        rotateDeg = 360 / len / 2 + 90,
        html = [],
        turnNum = 1 / len  // 文字旋轉(zhuǎn) turn 值
    that.setData({
      btnDisabled: app.awardsConfig.chance ? '' : 'disabled'  
    })
    var ctx = wx.createContext()
    for (var i = 0; i < len; i++) {
      // 保存當(dāng)前狀態(tài)
      ctx.save();
      // 開(kāi)始一條新路徑
      ctx.beginPath();
      // 位移到圓心,下面需要圍繞圓心旋轉(zhuǎn)
      ctx.translate(150, 150);
      // 從(0, 0)坐標(biāo)開(kāi)始定義一條新的子路徑
      ctx.moveTo(0, 0);
      // 旋轉(zhuǎn)弧度,需將角度轉(zhuǎn)換為弧度,使用 degrees * Math.PI/180 公式進(jìn)行計(jì)算。
      ctx.rotate((360 / len * i - rotateDeg) * Math.PI/180);
      // 繪制圓弧
      ctx.arc(0, 0, 150, 0,  2 * Math.PI / len, false);

      // 顏色間隔
      if (i % 2 == 0) {
          ctx.setFillStyle('rgba(255,184,32,.1)');
      }else{
          ctx.setFillStyle('rgba(255,203,63,.1)');
      }

      // 填充扇形
      ctx.fill();
      // 繪制邊框
      ctx.setLineWidth(0.5);
      ctx.setStrokeStyle('rgba(228,55,14,.1)');
      ctx.stroke();

      // 恢復(fù)前一個(gè)狀態(tài)
      ctx.restore();

      // 獎(jiǎng)項(xiàng)列表
      html.push({turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awardsConfig[i].name});    
    }

效果如下:

三、領(lǐng)獎(jiǎng)頁(yè)

領(lǐng)獎(jiǎng)頁(yè)是對(duì)獲獎(jiǎng)的信息進(jìn)行羅列

<view class="top">
	<image class="userinfo-avatar" src="{{head}}" background-size="cover"></image>
	<text style="font-size:40rpx">失散多年的哥哥</text>
</view>

<view class="mid">
	<button bindtap="gotoLottery" type="primary" style="width:600rpx;background-color:#D75858">去抽獎(jiǎng)</button>
</view>

<view class="txt">
	<text wx:if="{{awardsList.length > 0}}">恭喜您獲得了以下獎(jiǎng)品:</text>
	<text wx:if="{{awardsList.length == 0}}">您還中獎(jiǎng),快去抽獎(jiǎng)吧</text>
</view>

<view class="gift" wx:for="{{awardsList}}" wx:key="unique">
	<text style="font-size:34rpx;margin-left:30rpx">{{item}}</text>
</view>

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)幸運(yùn)大轉(zhuǎn)盤(pán)功能的示例代碼的文章就介紹到這了,更多相關(guān)小程序 幸運(yùn)轉(zhuǎn)盤(pán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論