fix: update bar in setTimeout (YvesCoding#31)

dist/vuescroll.common.js

@@ -2955,11 +2955,11 @@ var scrollPanel = {
   mounted: function mounted() {
     var _this = this;
 
-    this.$nextTick(function () {
+    setTimeout(function () {
       if (!_this._isDestroyed) {
         _this.updateInitialScroll();
       }
-    });
+    }, 0);
   },
   render: function render(h) {
     // eslint-disable-line
@@ -3106,6 +3106,7 @@ function createPanelChildren(vm, h) {
 function createTipDom(h, vm, type) {
   var stage = vm.vuescroll.state[type + 'Stage'];
   var dom = null;
+  /* istanbul ignore if */
   if (dom = vm.$slots[type + '-' + stage]) {
     return dom[0];
   }
@@ -3221,11 +3222,11 @@ function findValuesByMode(mode, vm) {
   return axis;
 }
 /**
- * 
- * 
+ *
+ *
  * @param {any} type height or width
  * have been computed in this.useNumbericSize
- * @returns 
+ * @returns
  */
 function getClientSizeByType(type) {
   var vuescroll = this.$el;
@@ -3240,6 +3241,8 @@ var vueScrollCore = {
   props: { ops: { type: Object } },
   mixins: [hackLifecycle, api, nativeMode, slideMode],
   mounted: function mounted() {
+    var _this = this;
+
     if (!this.renderError) {
       this.initVariables();
 
@@ -3251,17 +3254,22 @@ var vueScrollCore = {
 
       this.initWatchOpsChange();
 
-      this.initBarState();
-
-      this.initVuescrollPosition();
+      // setTimeout is long enough to
+      // make sure get correct dom's size
+      setTimeout(function () {
+        if (!_this._isDestroyed) {
+          _this.updateBarStateAndEmitEvent();
+          _this.initVuescrollPosition();
+        }
+      }, 0);
     }
   },
   updated: function updated() {
-    var _this = this;
+    var _this2 = this;
 
     this.$nextTick(function () {
-      if (!_this._isDestroyed) {
-        _this.showAndDefferedHideBar();
+      if (!_this2._isDestroyed) {
+        _this2.showAndDefferedHideBar();
       }
     });
   },
@@ -3349,7 +3357,6 @@ var vueScrollCore = {
         mouseenter: function mouseenter() {
           vm.vuescroll.state.pointerLeave = false;
           vm.updateBarStateAndEmitEvent();
-          vm.showBar();
         },
         mouseleave: function mouseleave() {
           vm.vuescroll.state.pointerLeave = true;
@@ -3358,15 +3365,13 @@ var vueScrollCore = {
         mousemove: function mousemove() /* istanbul ignore next */{
           vm.vuescroll.state.pointerLeave = false;
           vm.updateBarStateAndEmitEvent();
-          vm.showBar();
         }
       };
-    } else /* istanbul ignore next */{
+    } /* istanbul ignore next */else {
         vuescrollData.on = {
           touchstart: function touchstart() {
             vm.vuescroll.state.pointerLeave = false;
             vm.updateBarStateAndEmitEvent();
-            vm.showBar();
           },
           touchend: function touchend() {
             vm.vuescroll.state.pointerLeave = true;
@@ -3375,7 +3380,6 @@ var vueScrollCore = {
           touchmove: function touchmove() /* istanbul ignore next */{
             vm.vuescroll.state.pointerLeave = false;
             vm.updateBarStateAndEmitEvent();
-            vm.showBar();
           }
         };
       }
@@ -3424,6 +3428,7 @@ var vueScrollCore = {
       if (eventType) {
         this.emitEvent(eventType, nativeEvent);
       }
+      this.showAndDefferedHideBar();
     },
     updateMode: function updateMode() {
       var x = this.vuescroll.state.internalScrollLeft;
@@ -3446,23 +3451,22 @@ var vueScrollCore = {
     handleScroll: function handleScroll(nativeEvent) {
       this.recordCurrentPos();
       this.updateBarStateAndEmitEvent('handle-scroll', nativeEvent);
-      this.showAndDefferedHideBar();
     },
     setBarClick: function setBarClick(val) {
       /* istanbul ignore next */
       this.vuescroll.state.isClickingBar = val;
     },
     showAndDefferedHideBar: function showAndDefferedHideBar() {
-      var _this2 = this;
+      var _this3 = this;
 
       this.showBar();
       if (this.timeoutId) {
         clearTimeout(this.timeoutId);
         this.timeoutId = 0;
       }
       this.timeoutId = setTimeout(function () {
-        _this2.timeoutId = 0;
-        _this2.hideBar();
+        _this3.timeoutId = 0;
+        _this3.hideBar();
       }, this.mergedOptions.bar.showDelay);
     },
 
@@ -3520,7 +3524,7 @@ var vueScrollCore = {
       }
     },
     registryResize: function registryResize() {
-      var _this3 = this;
+      var _this4 = this;
 
       /* istanbul ignore next */
       if (this.destroyResize) {
@@ -3536,24 +3540,22 @@ var vueScrollCore = {
         contentElm = this.scrollContentElm;
       }
       var handleWindowResize = function handleWindowResize() /* istanbul ignore next */{
-        _this3.updateBarStateAndEmitEvent();
-        _this3.showAndDefferedHideBar();
-        if (_this3.mode == 'slide') {
-          _this3.updateScroller();
+        _this4.updateBarStateAndEmitEvent();
+        if (_this4.mode == 'slide') {
+          _this4.updateScroller();
         }
       };
       var handleDomResize = function handleDomResize() {
         var currentSize = {};
-        if (_this3.mode == 'slide') {
-          _this3.updateScroller();
-          currentSize['width'] = _this3.scroller.__contentWidth;
-          currentSize['height'] = _this3.scroller.__contentHeight;
-        } else if (_this3.mode == 'native' || _this3.mode == 'pure-native') {
-          currentSize['width'] = _this3.scrollPanelElm.scrollWidth;
-          currentSize['height'] = _this3.scrollPanelElm.scrollHeight;
+        if (_this4.mode == 'slide') {
+          _this4.updateScroller();
+          currentSize['width'] = _this4.scroller.__contentWidth;
+          currentSize['height'] = _this4.scroller.__contentHeight;
+        } else if (_this4.mode == 'native' || _this4.mode == 'pure-native') {
+          currentSize['width'] = _this4.scrollPanelElm.scrollWidth;
+          currentSize['height'] = _this4.scrollPanelElm.scrollHeight;
         }
-        _this3.updateBarStateAndEmitEvent('handle-resize', currentSize);
-        _this3.showAndDefferedHideBar();
+        _this4.updateBarStateAndEmitEvent('handle-resize', currentSize);
       };
       window.addEventListener('resize', handleWindowResize, false);
       var destroyDomResize = listenResize(contentElm, handleDomResize);
@@ -3608,33 +3610,33 @@ var vueScrollCore = {
       this.vuescroll.state.internalScrollTop = axis.y;
     },
     initWatchOpsChange: function initWatchOpsChange() {
-      var _this4 = this;
+      var _this5 = this;
 
       var watchOpts = {
         deep: true,
         sync: true
       };
       this.$watch('mergedOptions', function () {
         // record current position
-        _this4.recordCurrentPos();
-        _this4.$nextTick(function () {
-          if (_this4.isSmallChangeThisTick == true) {
-            _this4.isSmallChangeThisTick = false;
+        _this5.recordCurrentPos();
+        _this5.$nextTick(function () {
+          if (_this5.isSmallChangeThisTick == true) {
+            _this5.isSmallChangeThisTick = false;
             return;
           }
           // re do them jobsin case of
           // option changes
-          _this4.setVsSize();
-          _this4.registryResize();
-          _this4.updateMode();
+          _this5.setVsSize();
+          _this5.registryResize();
+          _this5.updateMode();
         });
       }, watchOpts);
 
       smallChangeArray.forEach(function (opts) {
-        _this4.$watch(opts, function () {
+        _this5.$watch(opts, function () {
           // when small changes changed,
           // we need not to updateMode or registryResize
-          _this4.isSmallChangeThisTick = true;
+          _this5.isSmallChangeThisTick = true;
         }, watchOpts);
       });
     },
@@ -3671,10 +3673,6 @@ var vueScrollCore = {
     initResizeDetection: function initResizeDetection() {
       this.registryResize();
     },
-    initBarState: function initBarState() {
-      this.updateBarStateAndEmitEvent();
-      this.showAndDefferedHideBar();
-    },
     initVuescrollPosition: function initVuescrollPosition() {
       this.scrollToHash();
     }