React中小球

最新推荐文章于 2024-09-14 23:28:04 发布

関西

最新推荐文章于 2024-09-14 23:28:04 发布

阅读量112

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_63813990/article/details/131603602

版权

该代码段展示了在React中使用useStatehook管理状态，通过事件处理函数hand处理触摸开始事件，创建并定位动态效果的div元素（商品收藏球）。当用户点击商品时，商品收藏球从被点击的商品位置移动到收藏框的位置，并在动画结束后自动删除。

摘要由CSDN通过智能技术生成

const [state, setstate] = useState(['商品3', '商品4', '商品5', '商品6', '商品3', '商品4', '商品5', '商品6', '商品7', '商品8', '商品9', '商品10'])
    const [num, setnum] = useState(0)
    const collect = createRef()
    // Getcollect = () => this.collect.current
    const Getcollect = () => collect.current
    const hand = (e) => {
        // 获取当前span的x和y的值
        let x = e.changedTouches[0].clientX
        console.log(e.changedTouches)
        console.log("111")
        let y = e.changedTouches[0].clientY
        // 点击一次让state中的num+1

        // 调用函数把x和y当参数传过去
        createBall(x, y)
        // 判断收藏的数量不为0的时候让收藏盒子显示
        // if (this.nums != 0) {
        //     this.Getcollect().style.opacity = '1'
        // }
    }
    const createBall = (left, top) => {
        // 创建div元素
        let Ball = document.createElement('div')
        // 给div定位
        Ball.style.position = "fixed"
        // Ball.style.position = "absolute";
        // div的left和span的left是一样的
        Ball.style.left = left + 'px'
        // div的top和span的top是一样的
        Ball.style.top = top + 'px'
        Ball.style.width = '20px'
        Ball.style.height = '20px'
        Ball.style.borderRadius = '50%'
        Ball.style.backgroundColor = 'red'
        // 贝塞尔曲线
        Ball.style.transition = "left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)";
        // 向父元素最后添加
        document.body.appendChild(Ball);
        // 添加动画属性
        setTimeout(() => {
            Ball.style.left = Getcollect().offsetLeft + Getcollect().offsetWidth / 2 + "px";
            Ball.style.top = Getcollect().offsetTop + "px";
        }, 0);
        //动画结束后，删除自己
        // ontransitionend事件 是在 transition过度完之后执行的 
        Ball.ontransitionend = function () {
            Ball.remove();
        };
    }
    return (
        <div className='Addcart' style={{ position: "relative" }}>
            <div className='box'>
                {state.map((item, index) => (
                    <div className='div' key={index}>
                        {item}
                        <span onTouchStart={hand} >+</span>
                    </div>
                ))}
                <div className='collect' ref={collect}>
                    <span>数量</span> : {num}
                </div>
            </div>
        </div>
    )