小程式中實現類似天貓抽獎的大轉盤和跑馬燈的效果-小程式開發-PHP中文網

小程式中實現類似天貓抽獎的大轉盤和跑馬燈的效果

高洛峰

發布： 2017-02-28 10:45:38

原創

3584 人瀏覽過

在我們做電商的主題活動的時候，經常用到跑馬燈來吸引眼球，並用大轉盤來實現抽獎的效果。
如何在微信小程式開發中也能實現這樣的效果呢？具體請看下面的講解。

需要實現的功能
1.實現類似天貓超市抽獎的大轉盤
2.再實現跑馬燈效果
3.點擊START，開始抽獎，抽獎完成後面有彈窗

先看效果圖

小程式中實現類似天貓抽獎的大轉盤和跑馬燈的效果

#################### 1.外面一圈閃爍的小球是用js控制的樣式.500ms改變一次樣式.簡單粗暴;2.抽獎的item也是js控制背景,但是怎麼樣讓它優雅的停下來是個問題.動畫中有timingFunction可以設定速度.自己用js就沒那麼簡單了.我這裡用setInterval(),時間是線性變化的.換個斜率先小後大的函數效果應該會好一些.######下面是頁面的WXML程式碼：###

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

登入後複製

###下面是頁面的WXSS程式碼：###

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

登入後複製

###以下是頁面的JS程式碼：###

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    circleList: [],//圆点数组  
    awardList: [],//奖品数组  
    colorCircleFirst: &#39;#FFDF2F&#39;,//圆点颜色1  
    colorCircleSecond: &#39;#FE4D32&#39;,//圆点颜色2  
    colorAwardDefault: &#39;#F5F0FC&#39;,//奖品默认颜色  
    colorAwardSelect: &#39;#ffe400&#39;,//奖品选中颜色  
    indexSelect: 0,//被选中的奖品index  
    isRunning: false,//是否正在抽奖  
    imageAward: [  
      &#39;../../images/1.jpg&#39;,  
      &#39;../../images/2.jpg&#39;,  
      &#39;../../images/3.jpg&#39;,  
      &#39;../../images/4.jpg&#39;,  
      &#39;../../images/5.jpg&#39;,  
      &#39;../../images/6.jpg&#39;,  
      &#39;../../images/7.jpg&#39;,  
      &#39;../../images/8.jpg&#39;,  
    ],//奖品图片数组  
  },  
   
  onLoad: function () {

登入後複製

############更多小程式中實現類似天貓抽獎的大轉盤和跑馬燈的效果相關文章請關注PHP中文網！ ############