uni-app開發經驗分享二十二： uni-app大轉盤思路解析

最近在研究uni-app，制作了一個很有意思的集合項目demo，這里給大家分享下大轉盤的前端設計思路

需求案例：大轉盤抽獎

線上demo查看：

 

 案例效果：

 制作思路：

前端大轉盤使用css3動畫來做，在開始做的時候，我思路上碰到一個問題，抽獎結果是我前端給后台還是后台給我，最后我發現，只有后台傳結果給前台才能實現代碼的數據閉環，那么按照這個思路，前端需要處理的只是對后台返回的接口來對前端進行數據處理和特效展示。

主要代碼：

data部分：

return {
				imgUrl: app.appImg,
				url: app.url,
				indicator: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				dianimage: 0,
				bgtimer: null,
				domearr: [
					{
						title:'現金大獎',
						id:1,
						img:'#'
					},
					{
						title:'積分大獎',
						id:2,
						img:'#'
					},
					{
						title:'優惠券大獎',
						id:3,
						img:'#'
					},
					{
						title:'贈品手機',
						id:4,
						img:'#'
					},
					{
						title:'謝謝惠顧',
						id:0,
						img:'#'
					},
					{
						title:'謝謝惠顧',
						id:0,
						img:'#'
					},
					{
						title:'謝謝惠顧',
						id:0,
						img:'#'
					},
					{
						title:'謝謝惠顧',
						id:0,
						img:'#'
					}
				],
				swiperarr: [{
						title:'恭喜 櫻桃小丸子 抽到88元現金紅包'
					},
					{
						title:'恭喜 用戶aaa 抽到77元現金紅包'
					}
				],
				mainname: 'kai',
				endname: 't',
				frequency:5,
				mainbind :false
			}

抽獎代碼方法部分：

			btnFun(){
				var that = this;
				if(that.mainbind == false){
					if(that.frequency  == 0){
						uni.showToast({
						    title: '你已無抽獎次數',
							icon:"none",
						    duration: 2000
						});
					}else{
						that.mainbind = true;
						that.mainname = 'kai';
						that.endname = 't';
						var index = parseInt(Math.random() * 8);
						that.mainname = 'kai'+(index+1);
						setTimeout(()=>{
							that.endname = 't'+(index+1);
							that.frequency = that.frequency - 1;
							if(that.domearr[index].id == 0){
								uni.showModal({
								    title: '沒有中獎，請再接再厲！',
								    content: '謝謝惠顧',
								    success: function (res) {
										that.mainbind = false;
								        if (res.confirm) {
								            console.log('用戶點擊確定');
								        } else if (res.cancel) {
								            console.log('用戶點擊取消');
								        }
								    }
								});
							}else{
								uni.showModal({
								    title: '恭喜你中獎了！',
								    content: that.domearr[index].title,
								    success: function (res) {
										that.mainbind = false;
								        if (res.confirm) {
								            console.log('用戶點擊確定');
								        } else if (res.cancel) {
								            console.log('用戶點擊取消');
								        }
								    }
								});
							}
							
						},3900);
					}
					
				}else{
					uni.showToast({
					    title: '請不要多次點擊',
						icon:"none",
					    duration: 2000
					});
				}
			}

如果想要全部代碼，歡迎和我聯系獲取demo源碼，希望這個思路對你有所幫助，一起進步。