Ihopeful Blog

Sweat is the lubricant of success.

首页 归档 标签 关于

Taro Parabola

2022-07-01 2 min read # 微信小程序 # React

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
RSS