购物车完成

src/components/moveBtn/index.module.scss

@@ -0,0 +1,19 @@
+.movableItem{
+    width: 100%;
+    height: 100%;
+}
+.moveBtn{
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 2px solid #cde5ff;
+    box-shadow: 0px 0px 20px 0px rgba(104,180,255,0.70);
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .shop_icon{
+        font-size: 50px;
+        color: $color_main;
+    }
+}

src/components/moveBtn/index.tsx

@@ -0,0 +1,30 @@
+import { MovableArea, MovableView, View } from "@tarojs/components"
+import Taro, { useReady } from "@tarojs/taro"
+import { ReactElement, useState } from "react"
+import classnames from "classnames";
+import styles  from './index.module.scss'
+
+type param = {
+    children?: ReactElement|null,
+    onClick?: () => void
+}
+export default ({children = null, onClick}:param) => {
+    const [screenHeight, setScreenHeight] = useState(0)
+    const [showMoveBtn, setShowMoveBtn] = useState(false)
+    useReady(() => {
+        const res = Taro.getSystemInfoSync()
+        if(res.screenHeight) {
+            let ratio = 750 / res.screenWidth;
+            setScreenHeight(res.screenHeight*ratio - 460)
+        }
+        setShowMoveBtn(true)
+    })
+    return (
+        <MovableArea className={styles.movableItem}>
+            {children}
+            {showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x='650rpx' y={screenHeight+'rpx'}>
+              <View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View>
+            </MovableView>}
+        </MovableArea>
+    )
+}