uniapp 微信小程序转盘指针抽奖

转盘抽奖uniapp小程序，跟搜到的插件转盘旋转不同，我们的需求是中间的指针也就是瓶子旋转，而且要求长摁蓄力液体装满瓶子，松手旋转并且液体慢慢转为空，最后停止在相应的奖品上。

首先考虑蓄力液体装满的问题，一开始想的是最底层放一个空瓶子的图片，然后把液体图片的bottom一点点改为0。但是发现瓶子并不是一个宽度，从下往上会越来越细，改变液体的位置不太合适。

后来想到了找设计mm切了几个图装满瓶子液体的图放最底层，上面压一个空瓶子但是没有底的图，通过控制空瓶子的高度，一点点把下面的液体显示出来。

此处需要插一下uniapp 动画的链接添加链接描述

         <!-- 转盘图片 --><view class="box"><view class="plant"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/plant.png')" mode="widthFix"></image></view><view class="bottleBox"  :animation="animationData" @touchstart="touchstartBottle " @touchmove='touchmoveBottle'@touchend="touchend"><!-- 手机号 --><button class="btn phone" open-type="getPhoneNumber" @getphonenumber="getphonenumber"v-if="havePhone==0"></button><!-- 蓄力动效  --><view class="bottle"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/b-all.png')" mode="widthFix"></image></view><view class="top" :animation="animationDataTop"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/b-top.png')" mode="widthFix"></image></view></view></view>

<style lang="less" scoped>
.box {width: 646rpx;height: 685rpx;margin: 58rpx auto 0;position: relative;display: flex;justify-content: center;align-items: center;.plant {width: 100%;height: 100%;position: absolute;}.bottleBox {// width: 183rpx;width: 60rpx;height: 135rpx;position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center;.bottle {width: 60rpx;// overflow: hidden;}.top {width: 60rpx;overflow: hidden;z-index: 99;position: absolute;top: 0;height: 130rpx;}.phone {background-color: transparent;width: 60rpx;height: 135rpx;z-index: 999;position: absolute;}}}
</style>

 //触摸开始let timerconst touchstartBottle = () => {liquidUpInfo.height=120liquidUpInfo.time=0console.log('liquidUpInfo',liquidUpInfo);startTouchTime.value=new Date()clearInterval(timer)timer=setInterval(()=>{if(liquidUpInfo.height>0){console.log('开始');liquidUpInfo.time+=100liquidUpInfo.height-=5console.log('liquidUpInfo',liquidUpInfo);liquidUp()}},100)}//触摸结束const touchend = () => {console.log('isPrize.value',isPrize.value);if(isPrize.value == 1){clearInterval(timer)console.log('触摸结束');liquidDown()     }}// 液体蓄力上涨const liquidUp = () => {console.log('液体蓄力上涨');var animation = uni.createAnimation({duration: liquidUpInfo.time,timingFunction: 'ease-in-out',})animation.height(liquidUpInfo.height+'rpx').step()animationDataTop.value = animation.export()}// 液体蓄力下降const liquidDown = () => {console.log('液体蓄力下降');var animation = uni.createAnimation({duration: liquidUpInfo.time,timingFunction: 'ease-in-out',})animation.height('130rpx').step()animationDataTop.value = animation.export()}

瓶子旋转停下抽奖就很简单啦，我是先让瓶子空转两圈，同时调接口获取抽奖信息，然后把奖品的位置序号存一下，再让瓶子转360x2+45x序号就OK了，瓶子两次的旋转时间都取长摁时间的一半，还加了一个参数防止多次点击抽奖。

完整代码如下（懒得整理了哈哈，有一些收货地址组件的弹窗啥的，大家自行删除就好。）

<template><view class="page"><!-- 背景 --><view class="mybg"><image class="myimg" :src="setCdn('/myimgs/index/bg.png')" mode="scaleToFill"></image></view><scroll-view class="home" scroll-y="true"><!-- title --><view class="title"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/title.png')" mode="widthFix"></image></view><!-- 转盘图片 --><view class="box"><view class="plant"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/plant.png')" mode="widthFix"></image></view><view class="bottleBox"  :animation="animationData" @touchstart="goStart" @touchmove='touchmoveBottle'@touchend="touchend"><!-- 手机号 --><button class="btn phone" open-type="getPhoneNumber" @getphonenumber="getphonenumber"v-if="havePhone==0"></button><!-- 蓄力动效  --><view class="bottle"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/b-all.png')" mode="widthFix"></image></view><view class="top" :animation="animationDataTop"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/b-top.png')" mode="widthFix"></image></view></view></view><!-- 可以参与活动 --><view class="buttons" v-if="isDuring"><!-- 次数 --><view class="num">抽奖次数：{{totalLotteryCount-lotteryCount}}/{{totalLotteryCount}}</view><!-- 按钮 --><view class="btns"><button class="btn share" @click="myShare" open-type="share"><image class="myimg" :src="setCdn('/myimgs/prize/share.png')" mode="widthFix"></image></button></view><!-- 规则按钮 --><view class="ruleBtn" @click="openRule"><image class="myimg" :src="setCdn('/myimgs/prize/goRule.png')" mode="widthFix"></image></view></view><!-- 活动结束 --><view class="over" v-else><image class="myimg" :src="setCdn('/myimgs/prize/over.png')" mode="widthFix"></image></view><!--                                            弹窗                                                                --><!-- 抽奖规则 --><view class="mask rule" v-if="popType=='isRule'" @click="popType=''" @touchmove.stop.prevent="moveHandle"><view class="pop animate__fadeInUp" @click.stop="inputt"><view class="popbg"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/rule.png')" mode="widthFix"></image></view><view class="tips" v-if="isStart"><view class="icon" @click.stop="changeAgree"><image class="myimg choosed" :src="setCdn('/myimgs/rule/choosed.png')" mode="widthFix"v-if="isAgree==1"></image><image class="myimg notchoose" :src="setCdn('/myimgs/rule/noSelect.png')" mode="widthFix"></image></view><view class="detail" @click.stop="popType='ruleDetail'"><image class="myimg" :src="setCdn('/myimgs/rule/detail.png')" mode="widthFix"></image></view></view><view class="conform" @click.stop="confirm" v-if="isStart"><image class="myimg" :src="setCdn('/myimgs/rule/conform.png')" mode="widthFix"></image></view><view class="conform" v-else @click="popType=''"><image class="myimg" :src="setCdn('/myimgs/treasure/back.png')" mode="widthFix"></image></view></view></view><!-- 实物奖品弹窗 --><view class="mask  gift " v-if="popType=='entity'" @click="popType=''" @touchmove.stop.prevent="moveHandle"><view :class="padeType==1 ? 'pop animate__zoomIn':'pop animate__fadeOutUp'" @click.stop="inputt"><view class="popbg"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/bg.png')" mode="widthFix"></image></view><view class="giftName">{{lotteryInfo.giftName}}</view><view class="giftImg"><image class="myimg" :src="lotteryInfo.giftCoverImg" mode="widthFix"></image></view><view class="btn" @click.stop="receive"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/receive.png')" mode="widthFix"></image></view></view></view><!-- 积分奖品弹窗 --><!-- +1 --><view class="mask  gift integral" v-if="popType=='integral1'" @click="popType=''"@touchmove.stop.prevent="moveHandle"><view :class="padeType==1 ? 'pop animate__zoomIn':'pop animate__fadeOutUp'"><!-- <image class="myimg" :src="setCdn('/myimgs/prizePop/first.png')" mode="widthFix"></image> --><view class="popbg" @click.stop="inputt"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/+1.png')" mode="widthFix"></image></view><view class="btn" @click="popType=''"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/close.png')" mode="widthFix"></image></view></view></view><!-- +2 --><view class="mask  gift integral" v-if="popType=='integral2'" @click="popType=''"@touchmove.stop.prevent="moveHandle"><view :class="padeType==1 ? 'pop animate__zoomIn':'pop animate__fadeOutUp'"><!-- <image class="myimg" :src="setCdn('/myimgs/prizePop/first.png')" mode="widthFix"></image> --><view class="popbg" @click.stop="inputt"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/+2.png')" mode="widthFix"></image></view><view class="btn" @click="popType=''"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/close.png')" mode="widthFix"></image></view></view></view><!-- 未中奖 --><view class="mask gift not " v-if="popType=='notGift'" @click="popType=''"@touchmove.stop.prevent="moveHandle"><view class="pop animate__zoomIn"><view class="popbg" @click.stop="inputt"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/not.png')" mode="widthFix"></image></view><view class="btn" @click="popType=''"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/close.png')" mode="widthFix"></image></view></view></view><!-- 兑换成功 --><view class="mask success" v-if="popType=='isSuccess'" @click="closePop"><view class="pop animate__fadeInUp" @click.stop="inputt"><view class="popbg"><image class="myimg" :src="setCdn('/myimgs/rule/bg.png')" mode="widthFix"></image></view><view class="title"><image class="myimg" :src="setCdn('/myimgs/2stage/shoppop/conversionTitle.png')"mode="widthFix"></image></view><view class="giftImg"><image class="myimg" :src="lotteryInfo.giftCoverImg" mode="widthFix"></image></view><view class="giftName">{{lotteryInfo.giftName}}</view><view class="btns"><view class="btn close" @click="closePop"><image class="myimg" :src="setCdn('/myimgs/2stage/bottle/back.png')" mode="widthFix"></image></view><view class="btn goMore" @click="goTreasure"><image class="myimg" :src="setCdn('/myimgs/2stage/shoppop/goMore.png')" mode="widthFix"></image></view></view></view></view><!-- 规则条款 --><view class="mask rule  privacy animate__zoomOutRight" v-if="popType=='ruleDetail'"@touchmove.stop.prevent="moveHandle"><view class="pop"><view class="popbg"><image class="myimg" :src="setCdn('/myimgs/rule/bg.png')" mode="widthFix"></image></view><view class="title"><image class="myimg" :src="setCdn('/myimgs/clause/rtitle.png')" mode="widthFix"></image></view><scroll-view class="content" scroll-y="true"><image class="myimg" :src="setCdn('/myimgs/clause/rcontent.png')" mode="widthFix"></image></scroll-view><view class="more"><image class="myimg" :src="setCdn('/myimgs/clause/more.png')" mode="widthFix"></image></view><view class="conform" @click="popType='isRule'"><image class="myimg" :src="setCdn('/myimgs/clause/close.png')" mode="widthFix"></image></view></view></view></scroll-view><mheader /><giftAdd ref="addPop" @finished='fn' /></view>
</template><script setup>import {ref,reactive} from 'vue'import {setCdn,showModal,showToast,throttle} from "@/common/js"import {onLoad,onShow,onShareAppMessage} from "@dcloudio/uni-app";import {shareConfig} from "@/config"import {useStore} from "@/stores"// const store = useStore();// import Age18 from "@/components/age18/age18.vue"// import myTabbar from "@/components/myTabbar/myTabbar.vue"import {api} from "@/service"import mheader from "@/components/header/header.vue"import giftAdd from "@/components/giftAdd/giftAdd.vue"const startDate = ref('2023/3/31 0:0:0')const endDate = ref('2023/4/9')let isAgree = ref(0) //同意规则let lotteryCount = ref('') //已抽奖次数let totalLotteryCount = ref('') //可以抽奖总次数let shared = ref('') //是否已分享let opened = ref("") //活动是否开启let addPop = ref(null) //收货地址let haveAdd = ref(0) //是否有收货地址let isAgreeP = ref(0) //同意隐私let isPrize = ref(0) //是否可以点击抽奖按钮let popType = ref('') //弹窗样式let padeType = ref(1) //1淡入 0淡出let isDuring = ref(1) //是否可以参加活动 后台返回let isStart = ref(0) //是否开始了活动 前端判断时间let isGif = ref(0) //是否显示抽奖动画let havePhone = ref(0) //是否授权了手机号let animationData = ref({})let animationDataTop = ref({})let lotteryInfo = ref({}) //中奖信息let giftLogId = ref('') //奖品记录idlet reGiftList = reactive([]) //奖品列表let subInfo = reactive({}) //提交到后台let startTouchTime=ref(0)//开始时间let duringTouchTime=ref(0)//长摁时间let liquidUpInfo=reactive({time:0,height:130})//关闭弹窗function closePop() {popType.value = ''lotteryInfo.value = {}subInfo.giftLogId = ''}//宝藏馆function goTreasure() {uni.navigateTo({url: '/pages/treasure/treasure'})closePop()uni.removeStorageSync('addinfo')}//触摸开始let timerconst touchstartBottle = () => {liquidUpInfo.height=120liquidUpInfo.time=0console.log('liquidUpInfo',liquidUpInfo);startTouchTime.value=new Date()clearInterval(timer)timer=setInterval(()=>{if(liquidUpInfo.height>0){console.log('开始');liquidUpInfo.time+=100liquidUpInfo.height-=5console.log('liquidUpInfo',liquidUpInfo);liquidUp()}},100)}//触摸结束const touchend = () => {console.log('isPrize.value',isPrize.value);if(isPrize.value == 1){clearInterval(timer)console.log('触摸结束');liquidDown()apiLottery()}}// 液体蓄力上涨const liquidUp = () => {console.log('液体蓄力上涨');var animation = uni.createAnimation({duration: liquidUpInfo.time,timingFunction: 'ease-in-out',})animation.height(liquidUpInfo.height+'rpx').step()animationDataTop.value = animation.export()}// 液体蓄力下降const liquidDown = () => {console.log('液体蓄力下降');var animation = uni.createAnimation({duration: liquidUpInfo.time,timingFunction: 'ease-in-out',})animation.height('130rpx').step()animationDataTop.value = animation.export()}//瓶子旋转const bottalAni = () => {console.log('瓶子旋转');lotteryInfo.value = {giftName: '',giftCoverImg: "",giftId: 0,sort: '',giftType: '',}animationData.value = nullvar animation = uni.createAnimation({duration: liquidUpInfo.time/2,timingFunction: 'ease',})let angle = 360 * 2// animation.rotate(angle).step()animationData.value = animation.export()setTimeout(() => {console.log('旋转动画');var animation = uni.createAnimation({duration: liquidUpInfo.time/2,timingFunction: 'ease',})let angle2 = 360 * 2 + lotteryInfo.value.sort * 45// let angle2=360 * 2 + 2*45console.log('angle2', angle2, lotteryInfo.value);animation.rotate(angle2).step()animationData.value = animation.export()setTimeout(() => {animation.rotate(0).step({duration: 100})animationData.value = animation.export()if (lotteryInfo.value.giftType == 'PHYSICAL') {popType.value = 'entity'return}if (lotteryInfo.value.giftType == 'SCORE') {if (lotteryInfo.value.giftName == '+1积分') {popType.value = 'integral1'} else {popType.value = 'integral2'}return}if (lotteryInfo.value.giftType == 'POSTER') {popType.value = 'notGift'return} // else {//    popType.value = 'notGift'//  return// }// animationData.value =null}, liquidUpInfo.time/2)}, liquidUpInfo.time/2)}//阻止穿透滑动function moveHandle() {return}// 是否可以在活动期间function ifDuringActivyty() {const currentDate = new Dateconsole.log('currentDate', currentDate);let endtime = new Date(endDate.value).getTime()let isInEndTime = endtime - currentDate > 0 ? true : falseconsole.log('isInEndTime', isInEndTime);let starttime = new Date(startDate.value).getTime()let isInStartTime = currentDate - starttime > 0 ? true : falseconsole.log('isInStartTime', isInStartTime);if (// isInEndTime &&isInStartTime) {isStart.value = 1} else {isStart.value = 0}}// 打开活动规则弹窗function openRule() {if (uni.getStorageSync('haveAgreeRuleBottle')) {isAgree.value = 1}popType.value = 'isRule'}//授权手机号function getphonenumber(e) {console.log(e);let code = e.detail.codelet data = {code: e.detail.code}api.GetPhone(data).then(res => {if (res.code == 200) {console.log(res);havePhone.value = res.datagetUserInfo()// goStart()} else {uni.showToast({title: res.message,icon: 'none'})}})}//同意拒绝规则function changeAgree() {isAgree.value = !isAgree.value}// 点击了确认function confirm() {console.log('isAgree.value', isAgree.value);if (isAgree.value == 1) {console.log('isAgree');popType.value = ''// 抽奖uni.setStorageSync('haveAgreeRuleBottle', true)// startLottery()} else {uni.showToast({title: '请先阅读并同意抽奖活动约定条款',icon: 'none'})}}//开始抽奖function goStart() {if (havePhone.value) {let haveAgreeRuleBottle = uni.getStorageSync('haveAgreeRuleBottle')console.log('haveAgreeRuleBottle', haveAgreeRuleBottle);if (isStart.value) {if (!uni.getStorageSync('haveAgreeRuleBottle')) {popType.value = 'isRule'} else {startLottery()}} else {popType.value = 'isRule'}} else {return}}//发起抽奖，调接口function startLottery() {console.log('可以抽奖', lotteryCount.value < totalLotteryCount.value);if (lotteryCount.value < totalLotteryCount.value) {if (isPrize.value == 0) {console.log('startLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLottery');isPrize.value = 1touchstartBottle()}} else {uni.showToast({icon: 'none',title: '抽奖次数已到上限'})}}//调抽奖接口const apiLottery=()=>{bottalAni()api.StartLotteryBottle().then(res => {console.log('----------ress调抽奖接口', res);if (res.code == 200) {getListGiftBottle()for (let i = 0; i < reGiftList.length; i++) {if (reGiftList[i].giftId == res.data.giftId) {lotteryInfo.value.giftId = res.data.giftIdlotteryInfo.value.giftName = res.data.giftNamelotteryInfo.value.giftCoverImg = res.data.giftCoverImglotteryInfo.value.sort = parseInt(reGiftList[i].sort)lotteryInfo.value.giftType = res.data.giftTypesubInfo.giftLogId = res.data.giftLogId}}console.log('----------lotteryInfo', lotteryInfo);}})}//打开收货地址页function goAddress() {uni.navigateTo({url: '/pages/address/address'})}//立即领取const receive = () => {console.log('立即领取', haveAdd.value);if (haveAdd.value) {console.log('打开组件');addPop.value.openAdd()popType.value = ''} else {console.log('打开收货地址');goAddress()popType.value = ''}}function fn() {console.log('========================shoudaol');submit()}//提交兑换信息const submit = () => {api.getuserinfo().then(res => {if (res.code == 200) {subInfo.receiverName = res.data.consigneeNamesubInfo.receiverPhone = res.data.consigneeMobilesubInfo.receiverDetailAddress = res.data.consigneeProvince + ' ' + res.data.consigneeCity + ' ' + res.data.consigneeArea +' ' + res.data.consigneeDetailAddressconsole.log('subInfo', subInfo);api.SaveGiftAddress(subInfo).then(res => {console.log('@@@@@@@@@@@@@@@', res);if (res.code == 200) {popType.value = 'isSuccess'}})}})}// 获取抽奖信息function getListGiftBottle() {api.GetLotteryinfoBottle().then(res => {console.log('-----------res', res);lotteryCount.value = res.data.lotteryCounttotalLotteryCount.value = res.data.totalLotteryCountopened.value = res.data.openedshared.value = res.data.sharedreGiftList = res.data.giftListconsole.log('reGiftList', reGiftList);if (opened.value) {isDuring.value = 1} else {isDuring.value = 0}setTimeout(() => {isPrize.value = 0}, 1000)})}//获取用户信息 判断是否授权过手机号function getUserInfo() {api.getuserinfo().then(res => {if (res.code == 200) {havePhone.value = res.data.phone || 0console.log('res', res);if (res.data.consigneeProvince) {haveAdd.value = 1subInfo.receiverName = res.data.consigneeNamesubInfo.receiverPhone = res.data.consigneeMobilesubInfo.receiverDetailAddress = res.data.consigneeProvince + ' ' + res.data.consigneeCity + ' ' + res.data.consigneeArea +' ' + res.data.consigneeDetailAddress} else {haveAdd.value = 0}}})}// 阻止冒泡function inputt() {console.log('阻止冒泡');}onLoad((option) => {ifDuringActivyty()getListGiftBottle()getUserInfo()// ListGiftBottle()});onShow(() => {if (uni.getStorageSync('addinfo')) {if (lotteryInfo) {console.log('打开组件');addPop.value.openAdd()} else {return}}})// 分享onShareAppMessage((res) => {console.log("分享");uni.removeStorageSync('addinfo')if (!shared.value) {api.ShareBottle().then(res => {console.log('-----------分享res', res);uni.showToast({title: '分享成功，抽奖次数+1'})getListGiftBottle()})}return {...shareConfig,}})
</script><style lang="less" scoped>.home {width: 750rpx;border-top: 1rpx solid transparent;position: relative;top: -1rpx;box-sizing: border-box;height: calc(100vh + 1rpx);height: 100vh;overflow: hidden;.myimg {width: 100%;height: 100%;}.title {width: 550rpx;margin: 170rpx auto 0;}.box {width: 646rpx;height: 685rpx;margin: 58rpx auto 0;position: relative;display: flex;justify-content: center;align-items: center;.plant {width: 100%;height: 100%;position: absolute;}.bottleBox {// width: 183rpx;width: 60rpx;height: 135rpx;position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center;.bottle {width: 60rpx;// overflow: hidden;}.top {width: 60rpx;overflow: hidden;z-index: 99;position: absolute;top: 0;height: 130rpx;}.phone {background-color: transparent;width: 60rpx;height: 135rpx;z-index: 999;position: absolute;}}}.boxGif {width: 750rpx;position: absolute;top: 0;}.buttons {.num {width: 750rpx;margin: 40rpx auto 0;text-align: center;font-size: 23rpx;color: #fdf7ed;font-weight: 700;font-family: SourceHanSansCN-Heavy;}.btns {display: flex;flex-direction: column;width: 750rpx;margin-top: 15rpx;justify-content: center;align-items: center;position: relative;.btn {width: 514rpx;height: 106rpx;}.share {width: 350rpx;height: 113rpx;margin-top: 32rpx;margin-left: 50rpx;}}}.ruleBtn {width: 90rpx;margin: 44rpx auto;padding-bottom: 150rpx;}.over {width: 600rpx;margin: 150rpx auto 0;}.mask {width: 750rpx;height: 101vh;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, .7);display: flex;justify-content: center;align-items: center;z-index: 999;.pop {display: flex;// justify-content: center;align-items: center;flex-direction: column;.popbg {width: 100%;position: absolute;top: 0;}}}.rule {.pop {width: 680rpx;height: 1242rpx;.popbg {width: 100%;position: absolute;top: 0;}.tips {// width: 400rpx;margin: 983rpx auto 0;display: flex;align-items: center;justify-content: center;.icon {position: relative;margin-right: 20rpx;top: -5rpx;.notchoose {width: 25rpx;display: flex;justify-content: center;align-items: center;}.choosed {width: 30rpx;position: absolute;top: -15rpx;left: 5rpx;display: flex;justify-content: center;align-items: center;}}.detail {width: 361rpx;display: flex;justify-content: center;align-items: center;}.word {font-family: SourceHanSansCN-Bold;font-size: 24rpx;color: #fdf7ed;line-height: 36rpx;font-weight: 700;text {padding-bottom: 10rpx;border-bottom: 2rpx solid #fdf7ed;}}}.conform {width: 200rpx;margin: 30rpx auto 0;}}}.prize {.pop {width: 700rpx;}}.not {.pop {// width: 679rpx;// height: 1242rpx;width: 700rpx;height: 900rpx;// position: relative;.popbg {width: 100%;position: absolute;top: 0;}.prizeImg {width: 330rpx;border: 10rpx solid #fff;margin: 280rpx auto 0;}}}.sub {.pop {width: 574rpx;.popbg {width: 100%;position: absolute;top: 0;}.buttons {margin: 336rpx auto 0;display: flex;justify-content: center;align-items: center;.btn {width: 200rpx;}.close {margin-left: 46rpx;}}}}.privacy {.content {margin-top: 20rpx;width: 574rpx;height: 680rpx;}.title {width: 750rpx;margin-left: -35rpx;}.more {width: 32rpx;margin: 20rpx auto 0;}}.gift {.pop {width: 697rpx;height: 831rpx;.giftName {margin-top: 262rpx;font-family: SourceHanSansCN-Heavy;font-size: 35rpx;font-weight: 700;color: #fdf7ed;text-align: center;}.giftImg {width: 500rpx;margin-top: 60rpx;}.btn {margin-top: 80rpx;width: 276rpx;}}}.integral {.btn {position: absolute;bottom: -83rpx;}}.not {.btn {position: absolute;bottom: 10rpx;}}.success {.pop {width: 679rpx;height: 1242rpx;.title {width: 465rpx;padding-top: 200rpx;margin-top: 0;}.giftName {margin-top: 40rpx;font-family: SourceHanSansCN-Heavy;font-size: 35rpx;font-weight: 700;color: #fdf7ed;text-align: center;}.giftImg {width: 437rpx;margin-top: 115rpx;}.btns {margin-top: 70rpx;display: flex;justify-content: center;align-items: center;flex-direction: column;.btn {width: 200rpx;}.goMore {width: 256rpx;margin-top: 40rpx;}}}}}
</style>

最后，代码仅供参考哈，主要还是记录一下思路，欢迎交流~~

uniapp 微信小程序转盘指针抽奖相关推荐

微信小程序转盘大抽奖
有需要写个积分抽奖功能,大题思路就有两个,一呢转盘上的内容使用文字,自己调整位置和角度,二呢使用整个的图片,优缺点一目了然. 比较懒就借鉴了第二种: 首先在js中全局定义: //微信提供的创建动画的方 ...
微信小程序-转盘抽奖
微信小程序-转盘抽奖代码: lucky-draw.wxss: .lucky_draw_zp{ width: 502rpx; height: 502rpx; margin: 0 auto; positi ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
uni-app微信小程序登录授权
uni-app微信小程序登录授权首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
uni-app 微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘
原文链接:uni-app 微信小程序实现全屏客服按钮可拖动,自动吸边-小月博客效果图如下: html : <movable-area class="movableArea" ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...

uniapp 微信小程序转盘指针抽奖

uniapp 微信小程序转盘指针抽奖相关推荐

最新文章

热门文章