Merge pull request #2030 from didi/fix-movable-position

fix: 修改movable默认定位样式&修复同时修改容器尺寸并修改x、y不生效问题

Author: hiyuki

packages/webpack-plugin/lib/runtime/components/web/mpx-movable-area.vue

@@ -1,21 +1,23 @@
 <template>
-    <div class="mpx-movable-area-container" ref="movableArea">
-        <div class="mpx-movable-scroll-wrapper" ref="scroll">
-            <slot></slot>
-        </div>
+  <div class="mpx-movable-area-container" ref="movableArea">
+    <div class="mpx-movable-scroll-wrapper" ref="scroll">
+      <slot></slot>
     </div>
+  </div>
 </template>
 
 <script type="text/ecmascript-6">
   export default {
-    data () {
-      return {}
+    data() {
+      return {
+        isInited: false,
+      }
     },
-    mounted () {
+    mounted() {
       this.computedStyle()
-    },
-    beforeDestroy () {
-
+      if (!this.closeResizeObserver) {
+        this.createResizeObserver()
+      }
     },
     methods: {
       computedStyle() {
@@ -26,17 +28,39 @@
         if (!style.height) {
           this.$refs.movableArea.style.height = '10px'
         }
+      },
+      createResizeObserver() {
+        if (typeof ResizeObserver !== 'undefined') {
+          this.resizeObserver = new ResizeObserver(entries => {
+            if (!this.isInited) {
+              this.isInited = true
+              return
+            }
+            this.$children.forEach(child => {
+              if (child && child.refresh) {
+                child.refresh()
+              }
+            })
+          })
+          this.resizeObserver.observe(this.$refs.movableArea)
+        }
+      },
+    },
+    beforeDestroy () {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
       }
-    }
+    },
   }
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
-    .mpx-movable-area-container
-        position: absolute
-        .mpx-movable-scroll-wrapper
-            position: absolute
-            top: 0
-            left: 0
-            bottom: 0
-            right: 0
+  .mpx-movable-area-container
+      position: relative
+      .mpx-movable-scroll-wrapper
+          position: absolute
+          top: 0
+          left: 0
+          bottom: 0
+          right: 0
 </style>

packages/webpack-plugin/lib/runtime/components/web/mpx-movable-view.vue

@@ -38,7 +38,13 @@ export default {
       touchEvent: '',
       isInited: false,
       deactivatedX: 0,
-      deactivatedY: 0
+      deactivatedY: 0,
+      // 缓存高度，用于检测变化
+      cachedContentHeight: 0,
+      cachedWrapperHeight: 0,
+      // 缓存宽度，用于检测变化
+      cachedContentWidth: 0,
+      cachedWrapperWidth: 0
     }
   },
   props: {
@@ -107,7 +113,24 @@ export default {
   },
   watch: {
     x (newVal) {
+      if (this.direction === 'vertical' || this.direction === 'none') {
+        return
+      }
       this.source = ''
+      // 检查宽度是否发生变化，只有在变化时才调用 refresh
+      const widthChanged = this.checkWidthChange()
+      let currentX = this.bs.x
+      
+      if (widthChanged) {
+        // 兼容容器尺寸变化且同时改变x的场景，ResizeObserver回调是异步的，如果不直接refresh，minScrollX, maxScrollX 拿到的都是上一次的值
+        this.refresh()
+        // bs refresh 方法内会触发 resetPosition()，如果容器宽度从 100 - 50，y 从 100 - 50，这会导致位置立即跳转到边界内，没有动画效果，造成视觉突兀
+        // 如果 refresh 导致了位置变化，先恢复到原位置再动画滚动
+        if (this.bs.x !== currentX) {
+          this.bs.scrollTo(currentX, this.bs.y, 0)
+        }
+      }
+      
       if (newVal > this.bs.minScrollX) {
         newVal = this.bs.minScrollX
       }
@@ -118,7 +141,24 @@ export default {
       this.bs.scrollTo(newVal, this.bs.y, this.speed)
     },
     y (newVal) {
+      if (this.direction === 'horizontal' || this.direction === 'none') {
+        return
+      }
       this.source = ''
+      // 检查高度是否发生变化，只有在变化时才调用 refresh
+      const heightChanged = this.checkHeightChange()
+      let currentY = this.bs.y
+      
+      if (heightChanged) {
+        // 兼容容器尺寸变化且同时改变y的场景，ResizeObserver回调是异步的，如果不直接refresh，minScrollY, maxScrollY 拿到的都是上一次的值
+        this.refresh()
+        // bs refresh 方法内会触发 resetPosition()，如果容器高度从 100 - 50，y 从 100 - 50，这会导致位置立即跳转到边界内，没有动画效果，造成视觉突兀
+        // 如果 refresh 导致了位置变化，先恢复到原位置再动画滚动
+        if (this.bs.y !== currentY) {
+          this.bs.scrollTo(this.bs.x, currentY, 0)
+        }
+      }
+      
       if (newVal > this.bs.minScrollY) {
         newVal = this.bs.minScrollY
       }
@@ -146,6 +186,10 @@ export default {
     if (!this.scrollOptions.closeResizeObserver) {
       this.createResizeObserver()
     }
+    // 初始化尺寸缓存
+    this.$nextTick(() => {
+      this.initSizeCache()
+    })
     this.init()
   },
   activated () {
@@ -178,13 +222,50 @@ export default {
           }
           this.refresh()
         })
-        const elementToObserve = document.querySelector('.mpx-movable-scroll-content')
-        elementToObserve && this.resizeObserver.observe(elementToObserve)
+        this.resizeObserver.observe(this.$refs.scrollContent)
       }
     },
     refresh () {
       this.bs && this.bs.refresh()
     },
+    // 检查高度是否发生变化
+    checkHeightChange () {
+      if (!this.$refs.scrollContent || !this.$parent.$refs.movableArea) {
+        return false
+      }
+      
+      const currentContentHeight = this.$refs.scrollContent.clientHeight
+      const currentWrapperHeight = this.$parent.$refs.movableArea.clientHeight
+      
+      const heightChanged = 
+        currentContentHeight !== this.cachedContentHeight || 
+        currentWrapperHeight !== this.cachedWrapperHeight
+      
+      // 更新缓存的高度
+      this.cachedContentHeight = currentContentHeight
+      this.cachedWrapperHeight = currentWrapperHeight
+      
+      return heightChanged
+    },
+    // 检查宽度是否发生变化
+    checkWidthChange () {
+      if (!this.$refs.scrollContent || !this.$parent.$refs.movableArea) {
+        return false
+      }
+      
+      const currentContentWidth = this.$refs.scrollContent.clientWidth
+      const currentWrapperWidth = this.$parent.$refs.movableArea.clientWidth
+      
+      const widthChanged = 
+        currentContentWidth !== this.cachedContentWidth || 
+        currentWrapperWidth !== this.cachedWrapperWidth
+      
+      // 更新缓存的宽度
+      this.cachedContentWidth = currentContentWidth
+      this.cachedWrapperWidth = currentWrapperWidth
+      
+      return widthChanged
+    },
     destroyBs () {
       if (!this.bs) return
       this.bs.destroy()
@@ -364,6 +445,15 @@ export default {
       }
       extend(this.bsOptions, this.scrollOptions)
     },
+    // 初始化尺寸缓存
+    initSizeCache () {
+      if (this.$refs.scrollContent && this.$parent.$refs.movableArea) {
+        this.cachedContentHeight = this.$refs.scrollContent.clientHeight
+        this.cachedWrapperHeight = this.$parent.$refs.movableArea.clientHeight
+        this.cachedContentWidth = this.$refs.scrollContent.clientWidth
+        this.cachedWrapperWidth = this.$parent.$refs.movableArea.clientWidth
+      }
+    },
     // 处理小数点，四舍五入，默认保留一位小数
     roundFun (value, n = 1) {
       return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)

packages/webpack-plugin/lib/runtime/components/web/mpx-swiper.vue

@@ -256,8 +256,7 @@
             }
             this.initBs()
           })
-          const elementToObserve = document.querySelector('.mpx-swiper');
-          this.resizeObserver.observe(elementToObserve);
+          this.resizeObserver.observe(this.$refs.wrapper);
         }
       },
       refresh () {