Implementieren Sie im Miniprogramm ähnliche Effekte wie die Tmall-Lotteriescheibe und das Marquee

Wenn wir E-Commerce-Aktivitäten durchführen, verwenden wir häufig Zelte, um Aufmerksamkeit zu erregen, und große Drehteller, um den Lotterieeffekt zu erzielen.
Wie können wir diesen Effekt bei der Entwicklung von WeChat-Miniprogrammen erreichen? Weitere Informationen finden Sie in der Erklärung unten.


Zu implementierende Funktionen
1. Implementieren Sie ein großes Karussell ähnlich der Tmall-Supermarkt-Lotterie
2. Klicken Sie auf START, um die Lotterie zu starten Die Lotterie ist abgeschlossen. Nach


Sehen Sie sich zuerst die Darstellungen an

Sagen Sie kurz

1. Die blinkenden Kugeln im äußeren Kreis werden alle 500 ms geändert. Der Stil ist einfach und grob Es ist ein Problem, die Geschwindigkeit zu stoppen, wenn Sie js selbst verwenden, und die Zeit ändert sich linear Steigung zuerst und eine größere sollte eine bessere Wirkung haben

Das Folgende ist der WXML-Code der Seite:

<!--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>

Das Folgende ist der WXSS-Code der Seite:

/**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;  
}

Das Folgende ist der JS-Code der Seite:

//index.js  
//获取应用实例  
var app = getApp()  
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 () {

Weitere Artikel darüber, wie man ähnliche Effekte wie den großen Drehteller und das Festzelt der Tmall-Lotterie in Mini erzielt Programme, achten Sie bitte auf die chinesische PHP-Website!