Wechat applet development big carousel imitation Tmall supermarket lottery effect code sharing

This article mainly introduces the code sharing of the big carousel imitation Tmall supermarket lottery effect developed by WeChat applet. The detailed code is compiled here, which has certain reference value. Interested friends can refer to it.

Tmall Supermarket’s turntable is often used. I used to do Android and had no idea. Now I’m trying the WeChat applet. I saw something interesting in other people’s apps and wanted to go there. Make one.

Go to GIF to see the effect:

Let’s talk briefly.

1. The flashing ball in the outer circle is a style controlled by js. The style changes once every 500ms. Simple and crude;

2. The lottery items are also js controlled backgrounds , but how to make it stop gracefully is a problem. Animation has timingFunction that can set the speed. Using js yourself is not that simple. I use setInterval() here, Time changes linearly. Change the function where the slope is smaller first and then larger. The effect should be better.

Comments I wrote some, so let’s take a look at it . If there is anything wrong,

welcome criticism!

Code:
1.index.wxml

<view class="container-out">
 <view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view>
 <view class="container-in">
  <view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">
   <image class="award-image" src="{{item.imageAward}}"></image>
  </view>
  <view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?&#39;#e7930a&#39;:&#39;#ffe400&#39;}}">START</view>
 </view>
</view>

2.index.wxss

##

.container-out {
 height: 600rpx;
 width: 650rpx;
 background-color: #b136b9;
 margin: 100rpx auto;
 border-radius: 40rpx;
 box-shadow: 0 10px 0 #871a8e;
 position: relative;
}

.container-in {
 width: 580rpx;
 height: 530rpx;
 background-color: #871a8e;
 border-radius: 40rpx;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}

/**小圆球
box-shadow: inset 3px 3px 3px #fff2af;*/

.circle {
 position: absolute;
 display: block;
 border-radius: 50%;
 height: 20rpx;
 width: 20rpx;
}

.content-out {
 position: absolute;
 height: 150rpx;
 width: 166.6666rpx;
 background-color: #f5f0fc;
 border-radius: 15rpx;
 box-shadow: 0 5px 0 #d87fde;
}

/**居中 加粗*/

.start-btn {
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 border-radius: 15rpx;
 height: 150rpx;
 width: 166.6666rpx;
 background-color: #ffe400;
 box-shadow: 0 5px 0 #e7930a;
 color: #f6251e;
 text-align: center;
 font-size: 55rpx;
 font-weight: bolder;
 line-height: 150rpx;
}

.award-image {
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 height: 140rpx;
 width: 130rpx;
}

3.index.js

Page({
 data: {
  circleList: [],//圆点数组
  awardList: [],//奖品数组
  colorCircleFirst: '#FFDF2F',//圆点颜色1
  colorCircleSecond: '#FE4D32',//圆点颜色2
  colorAwardDefault: '#F5F0FC',//奖品默认颜色
  colorAwardSelect: '#ffe400',//奖品选中颜色
  indexSelect: 0,//被选中的奖品index
  isRunning: false,//是否正在抽奖
  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',
  ],//奖品图片数组
 },

 onLoad: function () {
  var _this = this;
  //圆点设置
  var leftCircle = 7.5;
  var topCircle = 7.5;
  var circleList = [];
  for (var i = 0; i < 24; i++) {
   if (i == 0) {
    topCircle = 15;
    leftCircle = 15;
   } else if (i < 6) {
    topCircle = 7.5;
    leftCircle = leftCircle + 102.5;
   } else if (i == 6) {
    topCircle = 15
    leftCircle = 620;
   } else if (i < 12) {
    topCircle = topCircle + 94;
    leftCircle = 620;
   } else if (i == 12) {
    topCircle = 565;
    leftCircle = 620;
   } else if (i < 18) {
    topCircle = 570;
    leftCircle = leftCircle - 102.5;
   } else if (i == 18) {
    topCircle = 565;
    leftCircle = 15;
   } else if (i < 24) {
    topCircle = topCircle - 94;
    leftCircle = 7.5;
   } else {
    return
   }
   circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
  }
  this.setData({
   circleList: circleList
  })
  //圆点闪烁
  setInterval(function () {
   if (_this.data.colorCircleFirst == &#39;#FFDF2F&#39;) {
    _this.setData({
     colorCircleFirst: &#39;#FE4D32&#39;,
     colorCircleSecond: &#39;#FFDF2F&#39;,
    })
   } else {
    _this.setData({
     colorCircleFirst: &#39;#FFDF2F&#39;,
     colorCircleSecond: &#39;#FE4D32&#39;,
    })
   }
  }, 500)
  //奖品item设置
  var awardList = [];
  //间距,怎么顺眼怎么设置吧.
  var topAward = 25;
  var leftAward = 25;
  for (var j = 0; j < 8; j++) {
   if (j == 0) {
    topAward = 25;
    leftAward = 25;
   } else if (j < 3) {
    topAward = topAward;
    //166.6666是宽.15是间距.下同
    leftAward = leftAward + 166.6666 + 15;
   } else if (j < 5) {
    leftAward = leftAward;
    //150是高,15是间距,下同
    topAward = topAward + 150 + 15;
   } else if (j < 7) {
    leftAward = leftAward - 166.6666 - 15;
    topAward = topAward;
   } else if (j < 8) {
    leftAward = leftAward;
    topAward = topAward - 150 - 15;
   }
   var imageAward = this.data.imageAward[j];
   awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });
  }
  this.setData({
   awardList: awardList
  })
 },
 //开始游戏
 startGame: function () {
  if (this.data.isRunning) return
  this.setData({
   isRunning: true
  })
  var _this = this;
  var indexSelect = 0
  var i = 0;
  var timer = setInterval(function () {
   indexSelect++;
   //这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
   i += 30;
   if (i > 1000) {
    //去除循环
    clearInterval(timer)
    //获奖提示

    wx.showModal({
     title: &#39;恭喜您&#39;,
     content: &#39;获得了第&#39; + (_this.data.indexSelect + 1) + "个优惠券",
     showCancel: false,//去掉取消按钮
     success: function (res) {
      if (res.confirm) {
       _this.setData({
        isRunning: false
       })
      }
     }
    })
   }
   indexSelect = indexSelect % 8;
   _this.setData({
    indexSelect: indexSelect
   })
  }, (200 + i))
 }
})

The above is the detailed content of Wechat applet development big carousel imitation Tmall supermarket lottery effect code sharing. For more information, please follow other related articles on the PHP Chinese website!