uniapp app 获取 DOM节点设置图片旋转rotate

tengyuxin

已于 2023-06-14 16:10:48 修改

阅读量1.4k

点赞数 1

分类专栏： uniapp 文章标签： uni-app

于 2023-06-14 14:52:07 首次发布

本文链接：https://blog.csdn.net/tengyuxin/article/details/131207129

版权

uniapp 专栏收录该内容

35 篇文章 3 订阅

订阅专栏

需求：我要让一个图片旋转起来，点击图片可以暂停，再点击一次图片可以继续从刚才的角度继续旋转下去。

一、原生js实现方法

思考这个问题，首先要从原生js如何去实现

1. 写一个正方形方块

2. 获取其DOM节点，设置 transform:rotate(0deg);

3. 根据setInterval不断调用旋转方法，让rotate不断增加，就可以旋转下去乐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: aqua;
            color: blueviolet;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="box">
        我是一段文字
    </div>
</body>
<script>
    let timer; //定时器
    window.onload = function () {
        timer = setInterval(xuanZhuan, 30);
        let boxDOM = document.getElementById("box");
        let flag = true; //默认为true代表旋转
        boxDOM.onclick = function () {
            if (flag) {
                //停止旋转
                if(timer) clearInterval(timer);
                
            } else {
                //继续旋转
                timer = setInterval(xuanZhuan, 30);
            }
            flag = !flag;
        }
        
        let rotate = 0;//旋转角度
        function xuanZhuan() { //旋转函数
            let boxDOM = document.getElementById("box");  //获取dom节点
            rotate = rotate + 1;
            let temp = rotate + "deg";
            boxDOM.style.transform = `rotate(${temp})`;//设置旋转
        }
    }

</script>

</html>

二、在uniapp的 App 实现

根本问题是在DOM节点上修改角度值，而vue早就对DOM进行乐绑定，我们仅仅需要动态修改stye中transform:rotate(0deg);的值。

<template>
    <image 
	    :style="{transform: `rotate(${myRotateDeg}deg)`}"  
	    class="musicIocn" 
	    src="@/static/index/music2.png"
    >
    </image>
<template>

<script setup>
    import {ref,onMounted} from "vue"
	let myRotateDeg = ref(0); //初始音乐旋转角度
	let Timer; //定时器
	onMounted(() => {
		Timer = setInterval(getDOM,30); //开始旋转
	});

	//音乐执行旋转
	const getDOM = ()=>{
		myRotateDeg.value +=1;
	}
</script>