优化分类页面购物车图标移动区域和效果

src/pages/service/cate.vue

@@ -13,10 +13,16 @@
                 @onScroll="onScroll"
             />
         </view>
-        <movable-area class="cart-icon-box">
+        <movable-area
+            class="cart-icon-box"
+            :style="{ height: movableAreaStyle.height, top: movableAreaStyle.top, bottom: movableAreaStyle.bottom }"
+        >
             <movable-view
                 class="cart-icon-view"
                 direction="all"
+                :inertia="true"
+                :friction="5"
+                :animation="false"
                 :x="position.x"
                 :y="position.y"
                 @click="utils.toPage('/pages/service/cart')"
@@ -42,6 +48,11 @@ export default {
     data() {
         return {
             utils: this.$utils,
+            movableAreaStyle: {
+                height: 0,
+                bottom: 0,
+                top: 0,
+            },
             position: { x: 300, y: 1000 },
             currentId: 0,
             newId: 0,
@@ -65,16 +76,22 @@ export default {
         }),
     },
     async onLoad() {
-        let pageConfig = getApp().globalData.pageConfig;
-        let x = pageConfig.windowWidth - this.$utils.rpx2px(94);
-        let y = pageConfig.windowHeight - this.$utils.rpx2px(94);
-        // H5平台减去tabBar高度
+        const { windowWidth, windowHeight, safeAreaInsets } = getApp().globalData.pageConfig;
+        let safeX = windowWidth,
+            safeY = windowHeight - safeAreaInsets.top;
+        // --------------设置可移动范围--------------
+        this.movableAreaStyle.top = "auto";
+        this.movableAreaStyle.bottom = 0;
         // #ifdef H5
-        y = y - this.$utils.rpx2px(100);
+        safeY -= this.$utils.rpx2px(100);
+        this.movableAreaStyle.top = 0;
+        this.movableAreaStyle.bottom = "auto";
         // #endif
+        this.movableAreaStyle.height = safeY + "px";
+        // --------------设置可移动范围--------------
         this.position = {
-            x: x - this.$utils.rpx2px(20),
-            y: y - this.$utils.rpx2px(40),
+            x: safeX - this.$utils.rpx2px(94) - this.$utils.rpx2px(20),
+            y: safeY - this.$utils.rpx2px(94) - this.$utils.rpx2px(40),
         };
         // 加载分类
         this.data = [
@@ -175,12 +192,11 @@ export default {
     padding-bottom: 30rpx;
 }
 .cart-icon-box {
-    z-index: 15;
+    z-index: 20;
     position: fixed;
-    top: 0;
     left: 0;
+    right: 0;
     width: 100%;
-    height: 100%;
     pointer-events: none;
     .cart-icon-view {
         position: relative;