vue-virtual-infinite-scroll - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

package.json

 {
   "name": "vue-virtual-infinite-scroll",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "vue virtual infinite scroll",
@@ -5,0 +5,0 @@ "author": "zuolei <[e-mail]>",

README.MD

@@ -31,6 +31,6 @@ # vue-virtual-infinite-scroll
 <template>
-    <div>
+    <div class="demo">
       <virtual-list ref="scroller" :items="items" uniqueKey="id" :iscrollOptions="options" :variable="variable" :infinite="true" :pulldown="true" @loadMore="getMoreData" @pullRefresh="refreshData">
         <template slot="content" slot-scope="props">
-          <div class="demo-item" :style="getStyle(props.item.height)">
+          <div class="demo-item">
             <span>
@@ -72,4 +72,45 @@ {{props.item.text}}
     this.items = list
+  },
+  methods: {
+    getMoreData ($stateChange) {
+      if (this.items.length > 1000) {
+        $stateChange('complete')
+      } else {
+        setTimeout(() => {
+          let length = this.items.length
+          for (let i = length; i < length + 20; i++) {
+            this.items.push({
+              text: i,
+              id: i,
+              height: Math.max(Math.floor(Math.random() * 50), 20)
+            })
+          }
+          $stateChange('loaded')
+        }, 1500)
+      }
+    },
+    refreshData ($pullStateChange) {
+      setTimeout(() => {
+        this.items.splice(0)
+        for (let i = 0; i < 50; i++) {
+          this.items.push({
+            text: i,
+            id: i,
+            height: Math.max(Math.floor(Math.random() * 50), 20)
+          })
+        }
+        $pullStateChange('complete')
+      }, 1500)
+    },
   }
 </script>
+<style lang="postcss">
+  .demo {
+    position: absolute;
+    top: 20px;
+    bottom: 20px;
+    left: 10px;
+    right: 10px;
+  }
+</style>
 ```
@@ -79,3 +120,4 @@
 
-You should init the items array during your own component created function before the vue-virtual-infinite-scroll component created.
+1. You should init the items array during your own component created function before the vue-virtual-infinite-scroll component created.
+2. You should put the vue-virtual-infinite-scroll component during a parent component, and set a css position property(relative, absolute or fixed) to the parent component.
 
@@ -93,5 +135,5 @@ ## Prop Configures
 | distance | Number | * | 50 | The loadMore infinite function will be called when scrolled into the distance value from bottom  |
-| loadMore | Function | * | | The custom function called when prop infinite is true and component scrolled into the distance value from bottom |
+| loadMore | Function | * | | The custom function called when prop infinite is true and component scrolled into the distance value from bottom. It has a callback param which can controll the loader state(see the How to use) |
 | pulldown | Boolean | * | false | True means you want to use the pullRefresh function when the component pulled out of the top boundary |
-| pullRefresh | Function | * | | The custom function called when prop pulldown is true and the component pulled out the top boundary and released |
+| pullRefresh | Function | * | | The custom function called when prop pulldown is true and the component pulled out the top boundary and released. It has a callback param which can controll the puller state(see the How to use) |
 | pulldownText | Object | * | { begin: '下拉刷新',trigger: '释放更新',refresh: '更新中...',complete: '更新完成',error:'更新失败'} | The custom text object used to show in pull refresh |
@@ -98,0 +140,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

518099

increased by0.29%

Number of lines in readme file

142

increased by42%

No dependency changes