taro-parabola

基于Taro3、React的H5和微信小程序添加到购物车抛物线动画组件

安装

npm install taro-parabola

导入组件

import Parabola from 'taro-parabola'

参数说明

参数	描述	类型	必传	默认值
cartX	购物车 所在坐标的x值	number	是	screenWidth
cartY	购物车 所在坐标的y值	number	是	screenHeight - 60
onChange	点击回调方法	Function	否	() => void
parabolaStyle	抛物线样式	React.CSSProperties	否

使用

import { FC, memo, useEffect, useState } from 'react'
import Parabola from 'taro-parabola'
import Taro from '@tarojs/taro'

import { View } from '@tarojs/components'

 const list = [1, 2, 3, 4, 5]
const Component: FC = () => {
  const [cartInfo, setCartInfo] = useState({} as any)

  useEffect(() => {
    Taro.nextTick(() => {
      Taro.createSelectorQuery()
        .select(`#cart`)
        .boundingClientRect(info => {
          setCartInfo(info)
        })
        .exec()
    })
  }, [])

  return (
    <>
      {list.map(item => (
        <Parabola
          cartX={cartInfo.left}
          cartY={cartInfo.top}
          parabolaStyle={{ width: '15px', height: '15px', backgroundColor: '#333' }}
          onChange={() => {}}
          key={item}
        >
          {item}
        </Parabola>
      ))}
      <View id="cart">我是购物车</View>
    </>
  )
}

const Mall = memo(Component)
export default Mall