react、umijs中添加购物车小球的抛物线--上代码

在类组件index文件中使用

import React, { Component, createElement, createRef } from 'react'
import './index.css'

export default class Addcart extends Component{
    constructor(props) {
        super(props)
        this.state = {
            arr: ['商品1', '商品2', '商品3', '商品4', '商品5', '商品6', '商品7', '商品8', '商品9', '商品10'],
            // 初始值
            num: 0
        }
    }
    // 获取收藏盒子
    collect = createRef()
    Getcollect = () => this.collect.current
    nums = 0
    // 给每个span绑定点击事件
    Fnstart(e) {
        this.nums++
        // 获取当前span的x和y的值
        let x = e.changedTouches[0].clientX
        let y = e.changedTouches[0].clientY
        // 点击一次让state中的num+1
        this.setState({
            num: this.nums
        })
        // 调用函数把x和y当参数传过去
        this.createBall(x, y)
        // 判断收藏的数量不为0的时候让收藏盒子显示
        if (this.nums != 0) {
            this.Getcollect().style.opacity = '1'
        }
    }
    // 创建小球添加动画
    createBall(left, top) {
        // 创建div元素
        let Ball = document.createElement('div')
        // 给div定位
        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 = this.Getcollect().offsetLeft + this.Getcollect().offsetWidth / 2 + "px";
            Ball.style.top = this.Getcollect().offsetTop + "px";
        }, 0);
        //动画结束后，删除自己
        // ontransitionend事件 是在 transition过度完之后执行的 
        Ball.ontransitionend = function () {
            Ball.remove();
        };
    }

    render() {
        return (
            <div className='Addcart'>
                <div className='box'>
                    {this.state.arr.map((item, index) => (
                        <div className='div' key={index}>
                            {item}
                            <span onTouchStart={this.Fnstart.bind(this)}>+</span>
                        </div>
                    ))}
                    <div className='collect' ref={this.collect}>
                        <span>数量</span> : {this.state.num}
                    </div>
                </div>
            </div>
        )
    }
}

css文件代码

.Addcart {
    width: 100%;
    height: 100%;
 
    
        
}
.box {
    width: 100%;
    height: 100%;
}
.div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 20px;
    height: 100px;
    color: black;
    font-size: 30px;

    
    
}
.div span {
    text-align: center;
    font-size: 30px;
    color: black;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #000;
    line-height: 40px;
}



.collect {
    opacity: 0;
    margin: 100px 0 0 20px;
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
    border-top: none;
    text-align: center;
    line-height: 150px;
    font-size: 30px;
    
}
.collect span{
    color: blue;
}

函数组件index文件中使用

import axios from 'axios';
import React, { useState,useRef } from 'react';
import { useReducer } from 'react';
import { useEffect } from 'react';
import { Sidebar, Toast } from 'react-vant';
import './index.less'

export default () => {
  const [active, setActive] = useState(0);

  const [data,setData] = useState([])
  useEffect(()=>{
    axios.get("http://localhost:3333/showshop").then(value=>{
      setData(value.data)
    })
  },[])

  var [num,setNum] = useState(0)


  // 创建小球添加动画
  const createBall=(left, top)=> {
    // 创建div元素
    let Ball = document.createElement('div')
    // 给div定位
    Ball.style.position = "absolute";
    // div的left和span的left是一样的
    Ball.style.left = (left-10) + 'px'
    // div的top和span的top是一样的
    Ball.style.top = (top-10) + 'px'
    Ball.style.width = '20px'
    Ball.style.height = '20px'
    Ball.style.borderRadius = '50%'
    Ball.style.backgroundColor = 'green'
    // 贝塞尔曲线
    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();
    };
}

   // 获取收藏盒子
   const collect = useRef()
   const Getcollect = () => collect.current
   // 给每个span绑定点击事件
   const Fnstart=(e)=> {
       // 获取当前span的x和y的值
       let x = e.clientX
       let y = e.clientY
       // 点击一次让state中的num+1
        setNum(num+=1)
       // 调用函数把x和y当参数传过去
       createBall(x, y)
       // 判断收藏的数量不为0的时候让收藏盒子显示
       if (num != 0) {
           Getcollect().style.opacity = '1'
       }
   }


  return (
    <div>
      <div className='img'>
      </div>
      <Sidebar
      value={active}
      onChange={(v) => {
        setActive(v);
        Toast.info(`内容区 ${v + 1}`);
      }}
    >
      {
        data.map(item=>{
          return <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={item.name}>
              {
                item.children.map(ite=>{
                  return <>
                    <div>{ite.name}</div>
                    <div>{ite.price} <span style={{marginLeft:'2rem',marginRight:10}} onClick={()=>{
                      setNum(num-=1)
                    }}>-</span>{num}
                    {/* 点击加号抛物线的位置 */}
                    <span style={{marginLeft:'0.1rem'}} onClick={(e)=>{
                      Fnstart(e)
                      
                    }}>+</span></div>
                  </>
                })
                
              }
          </Sidebar.Item>
        })
      }
      
    </Sidebar>
    {/* 底部的收藏盒子 */}
      <div ref={collect} style={{width:50,height:50,background:"red"}}>
        1
    </div>
    </div>
    
  );
};