使用requestAnimationFrame，控制转盘指针

VIP文章 LDC-2AN1

已于 2022-11-13 14:14:29 修改

阅读量495

点赞数

分类专栏： web前端文章标签： uni-app javascript 前端

于 2022-01-16 15:05:31 首次发布

本文链接：https://blog.csdn.net/placebo1996/article/details/122523190

版权

原来是用css动画，切换类名的方式来控制页面，但一直都很僵硬，切换类名的时候很突兀

uniapp demo

再mounted里获得指针元素

mounted() {

// 获得指针节点
		this.pointerElement = document.querySelector('.pointer');

}

再点击抽奖时调用 this.startDraw()

// 点击抽奖
		startDraw() {
			if (this.drawTimes <= 0) return;
			if (!this.canClick) return;
			this.canClick = false;
			this.drawTimes--;

            // 接口请求返回中奖信息
			springFestivalUserDraw().then(res => {
				let resData = res.data;

				this.resultImagUrl = resData.icon;
				this.resGiftType = resData.isWinner;

				this.rotatePointer();
                
                // 与之前请求的奖品列表匹配获得指针停止的位置索引
				this.GiftArr.forEach((item, index) => {
					if (item.id == resData.winnerId) {
						this.rouletteActive = true;
						setTimeout(() => {
							this.dealResult(index);
						}, 2000);
					}