vue2 九宫格抽奖H5+手机rem自适应方法

 抽奖转盘效果：

 

 

 

 

奖品布局示意图

htmlIndex 0 定位Index 0	htmlIndex 1 定位Index 1	htmlIndex 2 定位Index 2
htmlIndex 3 定位Index 7	开始 抽奖	htmlIndex 4 定位Index 3
htmlIndex 5 定位Index 6	htmlIndex 6 定位Index 5	htmlIndex 7 定位Index 4

 App.vue 

<template>
	<div id="app" v-if="!isWeixinBrowser">
		<router-view />
	</div>
</template>

<script>
	export default {
		name: 'app',
		data(){
			return{
				isWeixinBrowser:false,
			}
		},
		mounted() {
			this.isWeixinBrowser = (/micromessenger/i).test(navigator.userAgent);//检查是否为微信浏览器打开，若是则提示用户使用浏览器打开
			if(this.isWeixinBrowser){
                //使用的element组件
				this.$alert('请使用浏览器打开!', '', {
					showConfirmButton:false,
					showClose:false,
					center: true
				});
			}
            
            //rem根据手机自适应
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';
			window.onresize = function() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';
			}
		}
	};
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}
</style>

使用的HbuildX，在设置里设置px转rem比例后可在正常设置px大小后转成对应rem单位大小

 

 比例 = 编写代码是所使用的的尺寸宽度 / 100 （公式由App.vue文件里的公式决定）

 

例：

LuckyDraw.vue

<template>
	<div class="container luckyDraw" >
		......
		<div class="main">
			......
			<div class="turntable">
				<div class="mask" v-if="isStart"></div>
				<div class="turnItem" :class="{ active: prizeIndex==0 }">
					<div v-if="prizeData[0].giftId!=null" class="turnContent">
						<img :src="''+prizeData[0].giftPic" />
						<p>{{prizeData[0].giftName}}</p>
					</div>
				</div>
				<div class="turnItem" :class="{ active: prizeIndex==1 }">
					<div v-if="prizeData[1].giftId!=null" class="turnContent">
						<img :src="''+prizeData[1].giftPic" />
						<p>{{prizeData[1].giftName}}</p>
					</div>
				</div>
				<div class="turnItem" :class="{ active: prizeIndex==2 }">
					<div v-if="prizeData[2].giftId!=null" class="turnContent">
						<img :src="''+prizeData[2].giftPic" />
						<p>{{prizeData[2].giftName}}</p>
					</div>
				</div>
				<div class="turnItem" :class="{ active: prizeIndex==7 }">
					<div v-if="prizeData[7].giftId!=null" class="turnContent">
						<img :src="''+prizeData[7].giftPic" />
						<p>{{prizeData[7].giftName}}</p>
					</div>
				</div>
				<div class="turnItem turnBtn">
					<el-button type="text" :disabled="isDisBtn" class="turnContent" @click="startLuckyDraw()">开始<br />抽奖</el-button>
				</div>
				<div class="turnItem" :class="{ active: prizeIndex==3 }">
					<div v-if="prizeData[3].giftId!=null" class="turnContent">
						<img :src="''+prizeData[3].giftPic" />
						<p>{{prizeData[3].giftName}}</p>
					</div>
				</div>
				<div class="turnItem" :class="{ active: prizeIndex==6 }">
					<div v-if="prizeData[6].giftId!=null" class="turnContent">
						<img :src="''+prizeData[6].giftPic" />
						<p>{{prizeData[6].giftName}}</p>
					</div>
				</div>
				<div class="turnItem" :class="{ active: prizeIndex==5 }">
					<div v-if="prizeData[5].giftId!=null" class="turnContent">
						<img :src="''+prizeData[5].giftPic" />
						<p>{{prizeData[5].giftName}}</p>
					</div>
				</div>
				<div class="turnItem" :class="{ active: prizeIndex==4 }">
					<div v-if="prizeData[4].giftId!=null" class="turnContent">
						<img :src="''+prizeData[4].giftPic" />
						<p>{{prizeData[4].giftName}}</p>
					</div>
				</div>
			</div>
			......
		</div>
	</div>
</template>

<script>
	import luckyDrawJS from '@/assets/js/luckyDraw.js';
	export default {
		name: 'LuckyDraw',
		data() {
			return {				
				isStart: false,//是否开始了抽奖
				isDisBtn:false,//是否禁用中心抽奖按钮防止连续点击
				prizeTimer: null,
				speed: 50,//转盘速度
				prizeIndex: null,//用来定位白块
				circleNumber: 5,//转盘圈数
				prizeData: [
					//奖品数据
					{
						giftId:null,
						giftName:'',
						giftPic:'',
						giftIndex: 0 //用来进行奖品排序
					},
					{
						giftId:null,
						giftName:'',
						giftPic:'',
						giftIndex: 1
					},
					{
						giftId:null,
						giftName:'',
						giftPic:'',
						giftIndex: 2
					},
					{
						giftId:null,
						giftName:'',
						giftPic:'',
						giftIndex: 4
					},
					{
						giftId:null,
						giftName:'',
						giftPic:'',
						giftIndex: 7
					},
					{
						giftId:null,
						giftName:'',
						giftPic:'',
						giftIndex: 6
					},
					{
						giftId:null,
						giftName:'',
						giftPic:'',
						giftIndex: 5
					},
					{
						giftId:null,
						giftName:'',
						giftPic:'',
						giftIndex: 3,
						
					}
				],
				luckyGift:{}//中奖信息
			};
		},
		mounted() {
			this.getLuckyDrawInfo();
		},
		methods: {
			getLuckyDrawInfo:function(){
				let config={
					......
				}
                //请求后台获取转盘奖品信息
				luckyDrawJS.getLuckyDrawInfo(config).then(res=>{
					if(res.status==0){
			            ......
						if(res.giftsVO.length>0){
							res.giftsVO.forEach(item=>{
                                //排序
								let flag = (el) => el.giftIndex == item.giftIndex;
								let findIndex = this.prizeData.findIndex(flag);
								this.prizeData.splice(findIndex,1,item);
							})
						}
					}else{
						......
					}
					
				})
			},
			startLuckyDraw:function(){
                //点击抽奖后立即禁用按钮，防连续点击
				this.isDisBtn = true;

				let config ={
					......
				}
				luckyDrawJS.luckyDraw(config).then(res=>{
                    //中奖信息
					this.luckyGift = res.luckyGiftVO
                    //获取奖品index
					let flag = (el) => el.giftIndex == res.luckyGiftVO.giftIndex;
					let findIndex = this.prizeData.findIndex(flag);

					this.prizeIndex = 0;//从第一个奖品开始转
					this.horseRaceLamp(findIndex)
					
				})
			},
			horseRaceLamp: function(findIndex) {
				this.isStart = true;//打开灰色遮罩
				this.prizeTimer = setInterval(() => {
                    //最后一圈且index与中奖index相同时关闭定时器
					if (this.circleNumber == 0 && this.prizeIndex == findIndex) {
						clearInterval(this.prizeTimer);
						......
						return
                    //还剩一圈时减速
					} else if (this.circleNumber == 1) {
						clearInterval(this.prizeTimer);
						this.speed += 35;
						this.horseRaceLamp(findIndex);
					}
                    //定位的index为7时，减一圈，重置定位的index
					if (this.prizeIndex == 7) {
						this.prizeIndex = 0;
						this.circleNumber--;
					}else{
						this.prizeIndex++;
					}
				}, this.speed);
			},
			......
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/assets/css/luckyDraw.css';

	.container {
		......	

		.main {
			......
			.turntable {
				......
				.turnItem {
					position: relative;
					width: 32%;
					padding-top: 31%;//使方块始终是正方形
					margin-bottom: 4rem;
					border-radius: 2rem;
					background-color: #ffffff;
					box-shadow: 0 2.133333rem 0 #FFE9A4;

					.....
				}

				.....
			}

			......
		}

		......
	}
</style>