demo介紹：uni-app統合--各類大轉盤demo介紹

這里給大家介紹下我做的一個uni-app的demo：抽獎系統

廢話不多說直接上效果圖：

線上案例：

首頁：

大轉盤抽獎頁面：

輪播機抽獎頁面：

 

 九宮格抽獎頁面：

翻牌抽獎頁面：

 獎品列表頁面：

抽獎的思路大家可以參考我的另一篇解析大轉盤的文章：

點擊這里前往

這里給大家分享下template內容：

	<view class="container">
		<view class="bg">
			<image :src="imgUrl+'draw-one-bg.png'"></image>
		</view>
		<view class="main-box">
			<view class="title-h1">
				<image :src="imgUrl+'draw-one-title.png'"></image>
			</view>
			<view class="body-one">
				<image :src="imgUrl+'draw-one-bg-one.png'"></image>
			</view>
			<view class="draw-box">
				<image :src="imgUrl+'draw-one-bg-two.png'"></image>
				<view class="draw-dian">
					<image :src="imgUrl+'draw-one-dian.png'" mode="" v-if="dianimage == 0"></image>
					<image :src="imgUrl+'draw-one-dian-one.png'" mode="" v-if="dianimage == 1"></image>
				</view>
				<view class="draw-bg">
					<view :class="'body-box '+mainname +' '+endname">
						<image :src="imgUrl+'draw-one-box.png'" mode=""></image>
						<view :class="'body-main t'+(index+1)" v-for="(item,index) in domearr" :key="index">
							<view class="title">
								{{item.title}}
							</view>
							<view class="image">
								<image :src="url+item.img"></image>
							</view>
						</view>
					</view>
					<view class="draw-btn" @tap="btnFun">
						<image :src="imgUrl+'draw-one-main.png'" mode=""></image>
					</view>
				</view>

			</view>
			<view class="main-title">
				您還有<span>{{frequency}}</span>次抽獎機會
			</view>
			<view class="uni-swiper">
				<view class="swiper">
					<swiper :indicator-dots="indicator" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true" class="swiper">
						<swiper-item>
							<view class="text">
								恭喜 櫻桃小丸子 抽到88元現金紅包
							</view>
						</swiper-item>
						<swiper-item>
							<view class="text">
								恭喜 櫻桃小丸子 抽到88元現金紅包
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="swiper-bg">
					<image :src="imgUrl+'draw-one-swiper.png'" mode=""></image>
				</view>
			</view>
		</view>
	</view>

如果需要全套demo，可以加我微信(zlhd15)獲得。