ミニプログラムに天猫の宝くじやマーキーと同様の効果を実装

電子商取引活動を行う場合、注目を集めるためにマーキーを使用したり、宝くじ効果を達成するために大きなターンテーブルを使用したりすることがよくあります。
WeChat ミニプログラムの開発でこの効果を実現するにはどうすればよいですか?詳細については、以下の説明を参照してください。


実装される機能
1. Tmallスーパーマーケットの宝くじと同様の大きなカルーセルを実装します
2. 次に、マーキーエフェクトを実装します
3. 宝くじが完了すると、ポップアップウィンドウが表示されます。


まずはレンダリングをご覧ください

簡単な説明

1. 外側の円の点滅するボールのスタイルは、500ms ごとに変更されます。 ; 2. 抽選アイテムもバックグラウンドでjsで制御していますが、その作り方が問題です アニメーション内に速度を設定するtimingFunctionがあります 自分でjsを使うのはそれほど簡単ではありません。ここでは setInterval() を使用し、関数の傾きを最初に小さくし、後で大きくする方が良いでしょう。以下はページの WXML コードです。はページの WXSS コードです:

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

以下はページの JS コードです:

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

Tmall 宝くじに似た大きなカルーセルをより小さなプログラムに実装します マーキー ライトの効果に関連する記事については、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。