@mpxjs/webpack-plugin 2.8.39 → 2.8.40-test

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -30,7 +30,12 @@
         type: [Number, String],
         default: 0
       },
-      scrollOptions: Object,
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
       updateRefresh: {
         type: Boolean,
         default: true
@@ -57,15 +62,23 @@
     data () {
       return {
         isLoading: false,
-        isAutoPullDown: true
+        isAutoPullDown: true,
+        currentX: 0,
+        currentY: 0,
+        lastX: 0,
+        lastY: 0
       }
     },
     computed: {
       _scrollTop () {
-        return processSize(this.scrollTop)
+        const size = processSize(this.scrollTop)
+        this.currentY = size
+        return size
       },
       _scrollLeft () {
-        return processSize(this.scrollLeft)
+        const size = processSize(this.scrollLeft)
+        this.currentX = size
+        return size
       },
       _lowerThreshold () {
         return processSize(this.lowerThreshold)
@@ -87,10 +100,13 @@
           className += ' active'
         }
         return className
+      },
+      scroll() {
+        return this.scrollX || this.scrollY
       }
     },
     mounted () {
-      this.init()
+      this.initBs()
     },
     activated () {
       if (!this.__mpx_deactivated) {
@@ -106,14 +122,14 @@
       this.__mpx_deactivated = true
     },
     beforeDestroy () {
-      this.destroy()
+      this.destroyBs()
     },
     updated () {
       if (this.updateRefresh) this.refresh()
     },
     watch: {
       scrollIntoView (val) {
-        this.bs && this.bs.scrollToElement('#' + val, this.scrollWithAnimation ? 200 : 0)
+        this.scrollToView(val, this.scrollWithAnimation ? 200 : 0)
       },
       _scrollTop (val) {
         this.bs && this.bs.scrollTo(this.bs.x, -val, this.scrollWithAnimation ? 200 : 0)
@@ -136,20 +152,33 @@
             }
           }
         },
+      },
+      scroll(val) {
+        if (val) {
+          this.initBs()
+        } else {
+          this.disableBs()
+        }
       }
     },
     methods: {
-      destroy () {
+      destroyBs () {
         if (!this.bs) return
         this.bs.destroy()
         delete this.bs
       },
-      init () {
-        if (this.bs) return
+      disableBs() {
+        if (!this.bs) return
+        this.bs.disable()
+        this.currentX = -this.bs.x
+        this.currentY = -this.bs.y
+      },
+      initBs () {
+        this.destroyBs()
         this.initLayerComputed()
         const originBsOptions = {
-          startX: -this._scrollLeft,
-          startY: -this._scrollTop,
+          startX: -this.currentX,
+          startY: -this.currentY,
           scrollX: this.scrollX,
           scrollY: this.scrollY,
           probeType: 3,
@@ -170,8 +199,8 @@
         this.bs.scroller.hooks.on('beforeRefresh', () => {
           this.initLayerComputed()
         })
-        this.lastX = -this._scrollLeft
-        this.lastY = -this._scrollTop
+        this.lastX = -this.currentX
+        this.lastY = -this.currentY
         this.bs.on('scroll', throttle(({ x, y }) => {
           const deltaX = x - this.lastX
           const deltaY = y - this.lastY
@@ -201,9 +230,11 @@
           leading: true,
           trailing: false
         }))
-        if (this.scrollIntoView) {
-          this.bs.scrollToElement('#' + this.scrollIntoView)
-        }
+        this.bs.on('scrollEnd', () => {
+          this.currentX = -this.bs.x
+          this.currentY = -this.bs.y
+        })
+        if (this.scrollIntoView) this.scrollToView(this.scrollIntoView)
         // 若开启自定义下拉刷新 或 开启 scroll-view 增强特性
         if (this.refresherEnabled || this.enhanced) {
           const actionsHandlerHooks = this.bs.scroller.actionsHandler.hooks
@@ -258,12 +289,19 @@
           }
         }
       },
+      scrollToView (id, duration = 0) {
+        if (!id) return
+        id = '#' + id
+        if (!document.querySelector(id)) return // 不存在元素时阻断，直接调用better-scroll的方法会报错
+        this.bs?.scrollToElement(id, duration)
+      },
       initLayerComputed () {
         const wrapper = this.$refs.wrapper
-        const wrapperWidth = wrapper.offsetWidth
-        const wrapperHeight = wrapper.offsetHeight
-        this.$refs.innerWrapper.style.width = `${wrapperWidth}px`
-        this.$refs.innerWrapper.style.height = `${wrapperHeight}px`
+        const computedStyle = getComputedStyle(wrapper)
+        // 考虑子元素样式可能会设置100%，如果直接继承 scrollContent 的样式可能会有问题
+        // 所以使用 wrapper 作为 innerWrapper 的宽高参考依据
+        this.$refs.innerWrapper.style.width = `${wrapper.clientWidth -  parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
+        this.$refs.innerWrapper.style.height = `${wrapper.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)}px`
         const innerWrapper = this.$refs.innerWrapper
         const childrenArr = Array.from(innerWrapper.children)
 
@@ -342,7 +380,11 @@
             class: 'circle circle-c'
           }),
         ]
-      ) : null
+      ) : this.$slots.refresher
+        ? createElement('div', {
+          class: 'mpx-pull-down-slot',
+        }, this.$slots.refresher)
+        : null
 
       const pullDownWrapper = this.refresherEnabled ? createElement('div', {
         class: 'mpx-pull-down-wrapper',
@@ -376,7 +418,11 @@
         bottom: 20px
         left: 50%
         transform: translateX(-50%)
-
+      .mpx-pull-down-slot
+        position: absolute
+        width: 100%
+        height: auto
+        bottom: 0
       .mpx-pull-down-content-black
         .circle
           display: inline-block;

package/lib/runtime/components/web/mpx-swiper.vue

@@ -2,9 +2,12 @@
   import getInnerListeners, { getCustomEvent } from './getInnerListeners'
   import BScroll from '@better-scroll/core'
   import Slide from '@better-scroll/slide'
+  import ObserveDOM from '@better-scroll/observe-dom'
   import throttle from 'lodash/throttle'
+  import { processSize } from '../../utils'
 
   BScroll.use(Slide)
+  BScroll.use(ObserveDOM)
 
   export default {
     name: 'mpx-swiper',
@@ -37,13 +40,21 @@
         type: String,
         default: 'default'
       },
-      scrollOptions: Object
+      previousMargin: String,
+      nextMargin: String,
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
     },
     data () {
       return {
         currentIndex: this.current,
         currentChildLength: 0,
-        lastChildLength: 0
+        lastChildLength: 0,
+        init: false
       }
     },
     computed: {
@@ -81,13 +92,20 @@
           default:
             return
         }
-      }
+      },
+      _previousMargin () {
+        return processSize(this.previousMargin) || 0
+      },
+      _nextMargin () {
+        return processSize(this.nextMargin) || 0
+      },
     },
     updated () {
-      this.currentChildLength = this.$children && this.$children.length
+      this.setCurrentChildLength()
     },
     watch: {
       current (val) {
+        this.currentIndex = val
         if (this.bs) {
           this.lastX = this.bs.x
           this.lastY = this.bs.y
@@ -95,7 +113,7 @@
         this.changeSource = ''
         this.goto(val)
       },
-      currentChildLength(val) {
+      currentChildLength (val) {
         if (val < this.lastChildLength && val < this.currentIndex) {
           this.goto(0, 0)
         }
@@ -119,65 +137,128 @@
       this.itemIds = []
     },
     mounted () {
-      const originBsOptions = {
-        scrollX: !this.vertical,
-        scrollY: this.vertical,
-        slide: {
-          loop: this.circular,
-          threshold: 0.5,
-          speed: this.duration,
-          easing: this.easing,
-          interval: this.interval,
-          autoplay: this.autoplay,
-          startPageXIndex: this.vertical ? 0 : this.current,
-          startPageYIndex: this.vertical? this.current : 0
-        },
-        momentum: false,
-        bounce: false,
-        probeType: 3,
-        stopPropagation: true
+      if (!this.scrollOptions.closeResizeObserver) {
+        this.createResizeObserver()
       }
-      const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions)
-      this.bs = new BScroll(this.$refs.wrapper, bsOptions)
-      this.bs.on('slideWillChange', (page) => {
-        this.currentIndex = this.vertical ? page.pageY : page.pageX
-        this.$emit('change', getCustomEvent('change', {
-          current: this.currentIndex,
-          currentItemId: this.itemIds[this.currentIndex] || '',
-          source: this.changeSource
-        }, this))
-      })
-
-      this.bs.on('scrollEnd', () => {
-        this.$emit('animationfinish', getCustomEvent('animationfinish', {
-          current: this.currentIndex,
-          currentItemId: this.itemIds[this.currentIndex] || '',
-          source: this.changeSource
-        }, this))
-      })
-      this.bs.on('scroll', throttle(({ x, y }) => {
-        this.$emit('transition', getCustomEvent('transition', {
-          dx: this.lastX - x,
-          dy: this.lastY - y
-        }, this))
-      }, 30, {
-        leading: true,
-        trailing: false
-      }))
-
-      this.bs.on('beforeScrollStart', () => {
-        if (this.bs) {
-          this.lastX = this.bs.x
-          this.lastY = this.bs.y
-        }
-        this.changeSource = 'touch'
-      })
+      this.setCurrentChildLength()
+      this.initBs()
     },
     beforeDestroy () {
-      this.bs && this.bs.destroy()
-      delete this.bs
+      this.destroyBs()
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+      }
     },
     methods: {
+      destroyBs () {
+        if (!this.bs) return
+        this.bs.destroy()
+        delete this.bs
+      },
+      initLayerComputed () {
+        const wrapper = this.$refs.wrapper
+        const computedStyle = getComputedStyle(wrapper)
+        const innerWrapper = this.$refs.innerWrapper
+        let width = wrapper.clientWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)
+        let height = wrapper.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)
+        if (!this.vertical) {
+          if (this._previousMargin || this._nextMargin) {
+            if (this._previousMargin) {
+              innerWrapper.style.marginLeft = `${this._previousMargin}px`
+              width = width - this._previousMargin
+            }
+            if (this._nextMargin) {
+              width = width - this._nextMargin
+            }
+          }
+        } else {
+          if (this._previousMargin || this._nextMargin) {
+            if (this._previousMargin) {
+              innerWrapper.style.marginTop = `${this._previousMargin}px`
+              height = height - this._previousMargin
+            }
+            if (this._nextMargin) {
+              height = height - this._nextMargin
+            }
+          }
+        }
+        innerWrapper.style.height = `${height}px`
+        innerWrapper.style.width = `${width}px`
+      },
+      initBs () {
+        this.destroyBs()
+        this.initLayerComputed()
+        const originBsOptions = {
+          scrollX: !this.vertical,
+          scrollY: this.vertical,
+          slide: {
+            loop: this.circular,
+            threshold: 0.5,
+            speed: this.duration,
+            easing: this.easing,
+            interval: this.interval,
+            autoplay: this.autoplay,
+            startPageXIndex: this.vertical ? 0 : this.currentIndex,
+            startPageYIndex: this.vertical ? this.currentIndex : 0
+          },
+          momentum: false,
+          bounce: false,
+          probeType: 3,
+          stopPropagation: true
+        }
+        const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions)
+        this.bs = new BScroll(this.$refs.innerWrapper, bsOptions)
+        this.bs.scroller.hooks.on('beforeRefresh', () => {
+          this.initLayerComputed()
+        })
+        this.bs.on('slideWillChange', (page) => {
+          this.currentIndex = this.vertical ? page.pageY : page.pageX
+          this.$emit('change', getCustomEvent('change', {
+            current: this.currentIndex,
+            currentItemId: this.itemIds[this.currentIndex] || '',
+            source: this.changeSource
+          }, this))
+        })
+
+        this.bs.on('scrollEnd', () => {
+          this.$emit('animationfinish', getCustomEvent('animationfinish', {
+            current: this.currentIndex,
+            currentItemId: this.itemIds[this.currentIndex] || '',
+            source: this.changeSource
+          }, this))
+        })
+        this.bs.on('scroll', throttle(({ x, y }) => {
+          this.$emit('transition', getCustomEvent('transition', {
+            dx: this.lastX - x,
+            dy: this.lastY - y
+          }, this))
+        }, 30, {
+          leading: true,
+          trailing: false
+        }))
+
+        this.bs.on('beforeScrollStart', () => {
+          if (this.bs) {
+            this.lastX = this.bs.x
+            this.lastY = this.bs.y
+          }
+          this.changeSource = 'touch'
+        })
+      },
+      createResizeObserver () {
+        if (typeof ResizeObserver !== 'undefined'){
+          this.resizeObserver = new ResizeObserver(entries => {
+            if (!this.init) {
+              this.init = true
+              return
+            }
+            this.initBs()
+          })
+          const elementToObserve = document.querySelector('.mpx-swiper');
+          this.resizeObserver.observe(elementToObserve);
+        }
+      },
       refresh () {
         this.bs && this.bs.refresh()
       },
@@ -186,6 +267,9 @@
         const y = this.vertical ? index : 0
         const speed = time === 0 ? 0 : this.duration
         this.bs && this.bs.goToPage(x, y, speed)
+      },
+      setCurrentChildLength () {
+        this.currentChildLength = this.$children && this.$children.length
       }
     },
     render (createElement) {
@@ -194,13 +278,13 @@
         on: getInnerListeners(this, { ignoredListeners: ['change', 'animationfinish', 'transition'] }),
         ref: 'wrapper'
       }
+
       const content = createElement('div', {
         class: {
           'mpx-swiper-content': true,
           vertical: this.vertical
         }
       }, this.$slots.default)
-
       const children = [content]
       if (this.indicatorDots) {
         const items = this.$slots.default.filter((VNode) => VNode.tag && VNode.tag.endsWith('mpx-swiper-item'))
@@ -227,7 +311,14 @@
         }, dotsItems)
         children.push(dots)
       }
-      return createElement('div', data, children)
+
+      const innerWrapper = createElement('div', {
+        ref: 'innerWrapper',
+        class: {
+          'mpx-swiper-wrapper': true
+        }
+      }, children)
+      return createElement('div', data, [innerWrapper])
     }
   }
 </script>
@@ -237,7 +328,6 @@
     overflow hidden
     position relative
 
-
   .mpx-swiper-content
     width 100%
     height 100%