Développement d'un mini programme WeChat d'un grand carrousel imitant le partage de code de l'effet de loterie des supermarchés Tmall-Développement de mini-programmes-php.cn

Développement d'un mini programme WeChat d'un grand carrousel imitant le partage de code de l'effet de loterie des supermarchés Tmall

高洛峰

Libérer： 2017-03-15 16:12:32

original

2581 Les gens l'ont consulté

Cet article présente principalement le partage de code de la grande platine imitant l'effet de loterie des supermarchés Tmall développé par l'applet WeChat. Le code détaillé est compilé ici, et les amis intéressés peuvent s'y référer.

J'utilise souvent le carrousel dans Tmall Supermarket. J'avais l'habitude de faire Android et je n'en avais aucune idée. Maintenant, j'essaie l'applet WeChat, j'ai vu quelque chose d'intéressant dans les applications d'autres personnes et je voulais le faire. allez-y. Faites-en un

Allez sur GIF pour voir l'effet :

Développement dun mini programme WeChat dun grand carrousel imitant le partage de code de leffet de loterie des supermarchés Tmall

Parlez brièvement. à ce sujet.

1. Le style des boules clignotantes dans le cercle extérieur est contrôlé par js Le style change une fois toutes les 500 ms. 🎜>2. Les éléments de loterie sont également contrôlés par l'arrière-plan js, mais comment les arrêter gracieusement est un problème.
l'animation

a une fonction de synchronisation pour définir la vitesse. Ce n'est pas si simple d'utiliser js vous-même. utilisez

setInterval() ici, le temps change linéairement. Changez la fonction avec une pente plus petite d'abord et une pente plus grande plus tard <.> Commentaires
J'en ai écrit, donc je peux le voir ici. Eh bien, s'il y a quelque chose qui ne va pas,

Bienvenue aux critiques

Téléchargez le. code :

1.index.w
xml

2.index.
wxss

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

Copier après la connexion

3.index.js

.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;
}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!