tangbc · tangbc · May 14, 2019 · May 7, 2019 · May 7, 2019 · May 7, 2019
diff --git a/demos/item-mode/build.js b/demos/item-mode/build.js
diff --git a/demos/page-mode/App.vue b/demos/page-mode/App.vue
@@ -0,0 +1,85 @@
+<template>
+<div class="app">
+    <GithubCorner path="/page-mode" />
+    <div class="container">
+        <Header title="page-mode"
+            :desciption="'Build ' + itemCount.toLocaleString() + ' items.'"
+            :start-index="start"
+            :on-data-change="onHeaderDataChange"
+        />
+        <div class="main">
+            <virtual-list class="list"
+                :size="size"
+                :remain="remain"
+                :start="start"
+                :pagemode="true"
+                :item="item"
+                :itemcount="itemCount"
+                :itemprops="getItemProps"
+            />
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import Item from '../common/Item.vue'
+import VirtualList from 'vue-virtual-scroll-list'
+import { countStorage, getRandomUser } from '../common/util'
+
+const remain = 17
+const itemSize = 80
+const itemCount = countStorage.get()
+
+let userInfoList = []
+for (let i = 0; i < itemCount; i++) {
+    userInfoList.push(getRandomUser())
+}
+
+export default {
+    name: 'App',
+
+    components: {
+        'virtual-list': VirtualList
+    },
+
+    data () {
+        return {
+            remain,
+            start: 0,
+            size: itemSize,
+            item: Item,
+            itemCount: itemCount
+        }
+    },
+
+    methods: {
+        getItemProps (itemIndex) {
+            return {
+                key: itemIndex,
+                props: {
+                    height: itemSize,
+                    index: itemIndex,
+                    info: userInfoList[itemIndex] || {}
+                }
+            }
+        },
+
+        onHeaderDataChange (type, value) {
+            if (type === 'start') {
+                this.start = value
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import '../common/app.less';
+html,body {
+    overflow: inherit;
+}
+.main {
+    margin-bottom: 500px
+}
+</style>
diff --git a/demos/page-mode/build.js b/demos/page-mode/build.js
diff --git a/demos/page-mode/index.html b/demos/page-mode/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <title>item-mode demo of vue-virtual-scroll-list</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="build.js"></script>
+</body>
+</html>
diff --git a/demos/page-mode/main.js b/demos/page-mode/main.js
@@ -0,0 +1,4 @@
+import App from './App.vue'
+import createApp from '../common/createApp'
+
+createApp(App)
diff --git a/demos/variable-height/build.js b/demos/variable-height/build.js
diff --git a/demos/vfor-mode/build.js b/demos/vfor-mode/build.js
diff --git a/dist/index.js b/dist/index.js
@@ -67,6 +67,10 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
         type: String,
         default: ''
       },
+      pagemode: {
+        type: Boolean,
+        default: false
+      },
       start: {
         type: Number,
         default: 0
@@ -174,14 +178,23 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
       this.delta = delta;
     },
     mounted: function mounted() {
+      if (this.pagemode) {
+        window.addEventListener('scroll', this.debounce ? _debounce(this.onScroll.bind(this), this.debounce) : this.onScroll, false);
+      }
+
       if (this.start) {
         var start = this.getZone(this.start).start;
         this.setScrollTop(this.variable ? this.getVarOffset(start) : start * this.size);
       } else if (this.offset) {
         this.setScrollTop(this.offset);
       }
     },
-    // check if delta should update when prorps change.
+    beforeDestroy: function beforeDestroy() {
+      if (this.pagemode) {
+        window.removeEventListener('scroll', this.debounce ? _debounce(this.onScroll.bind(this), this.debounce) : this.onScroll, false);
+      }
+    },
+    // check if delta should update when props change.
     beforeUpdate: function beforeUpdate() {
       var delta = this.delta;
       delta.keeps = this.remain + (this.bench || this.remain);
@@ -205,7 +218,7 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
       onScroll: function onScroll(event) {
         var delta = this.delta;
         var vsl = this.$refs.vsl;
-        var offset = (vsl.$el || vsl).scrollTop || 0;
+        var offset = this.pagemode ? window.pageYOffset : (vsl.$el || vsl).scrollTop || 0;
         delta.direction = offset > delta.scrollTop ? 'D' : 'U';
         delta.scrollTop = offset;
 
@@ -416,10 +429,14 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
       },
       // set manual scroll top.
       setScrollTop: function setScrollTop(scrollTop) {
-        var vsl = this.$refs.vsl;
+        if (this.pagemode) {
+          window.scrollTo(0, scrollTop);
+        } else {
+          var vsl = this.$refs.vsl;
 
-        if (vsl) {
-          (vsl.$el || vsl).scrollTop = scrollTop;
+          if (vsl) {
+            (vsl.$el || vsl).scrollTop = scrollTop;
+          }
         }
       },
       // filter the shown items base on `start` and `end`.
@@ -458,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;
@@ -484,6 +509,18 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
       var _this$delta = this.delta,
           paddingTop = _this$delta.paddingTop,
           paddingBottom = _this$delta.paddingBottom;
+
+      if (this.pagemode) {
+        return h(this.wtag, {
+          'style': {
+            'display': 'block',
+            'padding-top': paddingTop + 'px',
+            'padding-bottom': paddingBottom + 'px'
+          },
+          'class': this.wclass
+        }, list);
+      }
+
       return h(this.rtag, {
         'ref': 'vsl',
         'style': {