微信小程序如何實現搖一搖

這篇文章將為大家詳細講解有關微信小程序如何實現搖一搖，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

微信小程序目錄

為了更好的理解小程序和小程序開發，我們首先來看一下項目的目錄。

首先看下根目錄下的app.json的文件，可以看到在”pages”的數組里，里面配置了每個界面，且包含了每個界面文件的目錄

我們接下來看一下page文件夾，可以看到每個頁面需要包含兩個文件，一個是js文件，是每個界面的入口，wxml的文件是每個界面的布局文件，wxss是樣式文件。

接下來看一下logs文件夾，在logs文件夾中比index文件夾中多出了一個logs.json的文件，logs.json這個文件配置了一個界面的title的信息。

為了更好的理解項目的結構，我們來一張gif圖。

搖一搖項目實例

我們首先看一下測試效果

添加圖片資源

index.js

之前說過這個文件中監聽并處理小程序的生命周期函數、聲明全局變量，調用框架提供的豐富的 API，相當于我們寫移動端時候的邏輯代碼。

//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 () {
  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 == '#FFDF2F') {
    _this.setData({
     colorCircleFirst: '#FE4D32',
     colorCircleSecond: '#FFDF2F',
    })
   } else {
    _this.setData({
     colorCircleFirst: '#FFDF2F',
     colorCircleSecond: '#FE4D32',
    })
   }
  }, 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: '恭喜您',
     content: '獲得了第' + (_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))
 }
})

index.json

這個文件是配置文件。這里我們不需要配置。

index.wxss

index.wxss 是整個小程序的樣式表,如這個搖獎對應得搖一搖樣式。對css熟悉的肯定不會陌生。

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

index.wxml

index.wxml 是頁面的結構文件，如果有需要就需要配置。這里大家可以參照項目的文檔說明

<!--index.wxml-->
<view class="container-out">
 <view class="circle" wx:for="{{circleList}}" ></view>
 <view class="container-in">
  <view class="content-out" wx:for="{{awardList}}" >
   <image class="award-image" src="{{item.imageAward}}"></image>
  </view>
  <view class="start-btn" bindtap="startGame" >START</view>
 </view>
</view>

關于“微信小程序如何實現搖一搖”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。