Fix bug with page-mode and check update demo

Author: Stormtv

demos/item-mode/build.js

@@ -1,8 +1,8 @@
 <template>
 <div class="app">
-    <GithubCorner path="/item-mode" />
+    <GithubCorner path="/page-mode" />
     <div class="container">
-        <Header title="item-mode"
+        <Header title="page-mode"
             :desciption="'Build ' + itemCount.toLocaleString() + ' items.'"
             :start-index="start"
             :on-data-change="onHeaderDataChange"
@@ -11,7 +11,6 @@
             <virtual-list class="list"
                 :size="size"
                 :remain="remain"
-                :bench="30"
                 :start="start"
                 :pagemode="true"
                 :item="item"
@@ -28,7 +27,7 @@ import Item from '../common/Item.vue'
 import VirtualList from 'vue-virtual-scroll-list'
 import { countStorage, getRandomUser } from '../common/util'
 
-const remain = 6
+const remain = 17
 const itemSize = 80
 const itemCount = countStorage.get()
 
@@ -77,4 +76,10 @@ export default {
 
 <style lang="less">
 @import '../common/app.less';
+html,body {
+    overflow: inherit;
+}
+.main {
+    margin-bottom: 500px
+}
 </style>

demos/page-mode/App.vue

@@ -475,6 +475,14 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
           paddingBottom = 0;
         }
 
+        if (this.pagemode && this.$el && this.$el.parentElement) {
+          var bodyRect = document.body.getBoundingClientRect();
+          var elemRect = this.$el.parentElement.getBoundingClientRect();
+          var offset = elemRect.top - bodyRect.top;
+          paddingTop -= offset;
+          if (paddingTop < 0) paddingTop = 0;
+        }
+
         delta.paddingTop = paddingTop;
         delta.paddingBottom = paddingBottom;
         delta.offsetAll = allHeight - this.size * this.remain;

demos/page-mode/build.js

@@ -491,7 +491,13 @@
                 if (paddingBottom < this.size) {
                     paddingBottom = 0
                 }
-
+                if (this.pagemode && this.$el && this.$el.parentElement) {
+                    let bodyRect = document.body.getBoundingClientRect()
+                    let elemRect = this.$el.parentElement.getBoundingClientRect()
+                    let offset = elemRect.top - bodyRect.top
+                    paddingTop -= offset
+                    if (paddingTop < 0) paddingTop = 0
+                }
                 delta.paddingTop = paddingTop
                 delta.paddingBottom = paddingBottom
                 delta.offsetAll = allHeight - this.size * this.remain

demos/variable-height/build.js

@@ -8,7 +8,7 @@ const theme = 'pagemode-test'
 
 describe(theme, () => {
     const initSize = 40
-    const initRemian = 6
+    const initRemian = 10
     const initStart = 100
     const listCount = 1000
     const spy = sinon.stub()
@@ -69,7 +69,7 @@ describe(theme, () => {
         const itemFrags = wrapper.findAll('.for-item')
 
         // default real dom count is remain + default bench.
-        expect(itemFrags.length).toBe(6 + 6)
+        expect(itemFrags.length).toBe(initRemian + initRemian)
 
         // check every item render content.
         for (let i = 0; i < itemFrags.length; i++) {