微信小程序----大转盘跑马灯效果

分手后的思念是犯贱 2023-08-17 17:31 71阅读 0赞

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]

<view class="container-out">
      <view class="circle" wx:for="{
         {circleList}}" wx:key="" style="top:{
           {
           item.topCircle}}rpx;left:{
           {
           item.leftCircle}}rpx;background-color:{
           {
           (index%2===0)?firstCirColor:secondCirColor}}"></view>
      <view class="container-in">
        <view class="awrad" wx:for="{
         {awardList}}" wx:key="" style="top:{
           {
           item.topAward}}rpx;left:{
           {
           item.leftAward}}rpx;background-color:{
           {
           (index===seleIndex)?seleColor:defuColor}}">
          <image class="award-image" src="{
         {item.imageAward}}"></image>
        </view>
        <view class="btn" bindtap="startGame" style="background-color:{
           {
           isStart?'#e7930a':'#ffe400'}}">开始</view>
      </view>
    </view>

// pages/pmd/pmd.js
    Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
        circleList: [],
        awardList: [],
        firstCirColor: '#FFDF2F',
        secondCirColor: '#FE4D32',
        seleColor: '#ffe400',
        defuColor: '#F5F0FC',
        imageAward: [
          '../../images/1.jpg',
          '../../images/2.jpg',
          '../../images/3.jpg',
          '../../images/4.jpg',
          '../../images/5.jpg',
          '../../images/6.jpg',
          '../../images/7.jpg',
          '../../images/8.jpg',
        ],
        isStart: false,
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        
        let that = this;
        let circleList = [],
          topCircle = 7.5,
          leftCircle = 7.5;
        for (let i = 0; i < 24; i++) {
        
          if (i === 0) {
        
            topCircle = 15;
            leftCircle = 15;
          } else if (i < 6) {
        
            topCircle = 7.5;
            leftCircle += 95;
          } else if (i === 6) {
        
            topCircle = 15;
            leftCircle = 570;
          } else if (i < 12) {
        
            topCircle += 95;
            leftCircle = 570;
          } else if (i === 12) {
        
            topCircle = 570;
            leftCircle = 570;
          } else if (i < 18) {
        
            topCircle = 570;
            leftCircle -= 95;
          } else if (i === 18) {
        
            topCircle = 575;
            leftCircle = 15;
          } else if (i < 24) {
        
            topCircle -= 95;
            leftCircle = 10;
          } else {
        
            return;
          }
          circleList.push({
        
            topCircle: topCircle,
            leftCircle: leftCircle
          });
        }
        this.setData({
        
          circleList: circleList
        });
        // 圆点闪烁
        setInterval(function() {
        
          if (that.data.firstCirColor === '#FFDF2F') {
        
            that.setData({
        
              firstCirColor: '#FE4D32',
              secondCirColor: '#FFDF2F'
            })
          } else {
        
            that.setData({
        
              firstCirColor: '#FFDF2F',
              secondCirColor: '#FE4D32'
            })
          }
        }, 500)
        let awardList = [],
          topAward = 15,
          leftAward = 15;
        for (let i = 0; i < 8; i++) {
        
          if (i == 0) {
        
            topAward = 15;
            leftAward = 15;
          } else if (i < 3) {
        
            topAward = 15;
            leftAward += 180;
          } else if (i < 5) {
        
            topAward += 180;
            leftAward = 375;
          } else if (i < 7) {
        
            topAward = 375;
            leftAward -= 180;
          } else if (i < 8) {
        
            topAward -= 180;
            leftAward = 15;
          }
          let imageAward = this.data.imageAward[i];
          awardList.push({
        
            topAward: topAward,
            leftAward: leftAward
          })
        }
        this.setData({
        
          awardList: awardList
        });
      },
    
      startGame:function(){
        
        if (this.data.isStart) return
        let that=this;
        let i = 0, seleIndex=0;
        let timer=setInterval(function(){
        
          seleIndex++;
          i+=30;
          if(i>1000){
        
            clearInterval(timer);
            wx.showModal({
        
              title: '恭喜您',
              content: '获得了第'+(that.data.seleIndex)+'个优惠券',
              showCancel:false,
              success:function(res){
        
                if(res.confirm){
        
                  that.setData({
        
                    isStart:false
                  })
                }
              }
            })
          }
          seleIndex=seleIndex%10;
          that.setData({
        
            seleIndex:seleIndex
          })
        },i+200)
      },
    })

/* pages/pmd/pmd.wxss */
    .container-out{
        
      width: 600rpx;
      height: 600rpx;
      background-color: #b136b9;
      margin: 100rpx auto;
      border-radius: 40rpx;
      position: relative;
    }
    .circle{
        
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      position: absolute;
    }
    .container-in{
        
      width: 540rpx;
      height: 540rpx;
      background-color: #871a8e;
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -270rpx -270rpx;
      border-radius: 30rpx;
    }
    .awrad{
        
      width: 150rpx;
      height: 150rpx;
      background-color: #ccc;
      position: absolute;
      border-radius: 20rpx;
    }
    
    .btn{
        
      width: 150rpx;
      height: 150rpx;
      background-color: #ffe400;
      border-radius: 20rpx;
      position: absolute;
      top:198rpx;
      left: 198rpx;
      text-align: center;
      line-height: 150rpx;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]: /images/20230808/4764795be92d477ab9584a43e7d11df1.png