在我們做電商的主題活動的時候,經常用到跑馬燈來吸引眼球,並用大轉盤來實現抽獎的效果。
如何在微信小程式開發中也能實現這樣的效果呢?具體請看下面的講解。
需要實現的功能
1.實現類似天貓超市抽獎的大轉盤
2.再實現跑馬燈效果
3.點擊START,開始抽獎,抽獎完成後面有彈窗
先看效果圖
<!--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?'#e7930a':'#ffe400'}}">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: '#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 () {############更多小程式中實現類似天貓抽獎的大轉盤和跑馬燈的效果相關文章請關注PHP中文網! ############