From a6942f89f3b655bda5378f5880266a3894358744 Mon Sep 17 00:00:00 2001 From: VanishMax Date: Sun, 1 Dec 2019 09:17:03 +0300 Subject: [PATCH 1/3] Fix typos and misspelling mistakes --- .gitignore | 2 ++ package-lock.json | 2 +- src/index.js | 44 ++++++++++++++++++++++---------------------- 3 files changed, 25 insertions(+), 23 deletions(-) diff --git a/.gitignore b/.gitignore index 6bb2ce0..184910b 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,5 @@ coverage demos/dev/ demos/dev*/ demos/**/*.map +.idea +.vscode diff --git a/package-lock.json b/package-lock.json index 6c41d0d..b585d7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-virtual-scroll-list", - "version": "1.4.2", + "version": "1.4.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/index.js b/src/index.js index d098ca8..0c8bec7 100644 --- a/src/index.js +++ b/src/index.js @@ -88,15 +88,15 @@ default: 0 }, totop: { - type: [Function, Boolean], // Boolean just disable for priviate. + type: [Function, Boolean], default: false }, tobottom: { - type: [Function, Boolean], // Boolean just disable for priviate. + type: [Function, Boolean], default: false }, onscroll: { - type: [Function, Boolean], // Boolean just disable for priviate. + type: [Function, Boolean], // Boolean disables default behavior default: false }, istable: { @@ -118,7 +118,7 @@ } }, - // use changeProp to identify which prop change. + // use changeProp to identify the prop change. watch: { size () { this.changeProp = 'size' @@ -303,8 +303,8 @@ const zone = this.getZone(overs) const bench = this.bench || this.remain - // for better performance, if scroll pass items within now bench, do not update. - // and if overs is going to reach last item, we should render next zone immediately. + // for better performance, if scroll passes items within the bench, do not update. + // and if it's close to the last item, render next zone immediately. const shouldRenderNextZone = Math.abs(overs - delta.start - bench) === 1 if ( !shouldRenderNextZone && @@ -314,7 +314,7 @@ return } - // we'd better make sure forceRender calls as less as possible. + // make sure forceRender calls as less as possible. if ( shouldRenderNextZone || zone.start !== delta.start || @@ -326,7 +326,7 @@ } }, - // return the right zone info base on `start/index`. + // return the right zone info based on `start/index`. getZone (index) { let start const delta = this.delta @@ -350,8 +350,8 @@ } }, - // public method, force render ui list if we needed. - // call this before the next repaint to get better performance. + // public method, force render ui list if needed. + // call this before the next rerender to get better performance. forceRender () { window.requestAnimationFrame(() => { this.$forceUpdate() @@ -365,7 +365,7 @@ } }, - // return the scroll passed items count in variable. + // return the scroll of passed items count in variable. getVarOvers (offset) { let low = 0 let middle = 0 @@ -444,7 +444,7 @@ return 0 }, - // return the variable paddingTop base current zone. + // return the variable paddingTop based on current zone. // @todo: if set a large `start` before variable was calculated, // here will also case too much offset calculate when list is very large, // consider use estimate paddingTop in this case just like `getVarPaddingBottom`. @@ -452,20 +452,20 @@ return this.getVarOffset(this.delta.start) }, - // return the variable paddingBottom base current zone. + // return the variable paddingBottom based on the current zone. getVarPaddingBottom () { const delta = this.delta const last = delta.total - 1 if (delta.total - delta.end <= delta.keeps || delta.varLastCalcIndex === last) { return this.getVarOffset(last) - this.getVarOffset(delta.end) } else { - // if unreached last zone or uncalculate real behind offset - // return the estimate paddingBottom avoid too much calculate. + // if unreached last zone or uncalculated real behind offset + // return the estimate paddingBottom and avoid too much calculations. return (delta.total - delta.end) * (delta.varAverSize || this.size) } }, - // retun the variable all heights use to judge reach bottom. + // return the variable all heights use to judge reach bottom. getVarAllHeight () { const delta = this.delta if (delta.total - delta.end <= delta.keeps || delta.varLastCalcIndex === delta.total - 1) { @@ -477,7 +477,7 @@ // public method, allow the parent update variable by index. updateVariable (index) { - // clear/update all the offfsets and heights ahead of index. + // clear/update all the offsets and heights ahead of index. this.getVarOffset(index, true) }, @@ -502,12 +502,12 @@ } }, - // filter the shown items base on `start` and `end`. + // filter the shown items based on `start` and `end`. filter (h) { const delta = this.delta const slots = this.$slots.default || [] - // item-mode shoud judge from items prop. + // item-mode should be decided from items prop. if (this.item || this.$scopedSlots.item) { delta.total = this.itemcount if (delta.keeps > delta.total) { @@ -573,7 +573,7 @@ style: { display: 'block', 'padding-top': paddingTop + 'px', - 'padding-bottom': paddingBottom + 'px' + 'padding-bottom': paddingBottom + 'px', }, class: this.wclass, attrs: { @@ -581,7 +581,7 @@ } }, list) - // page mode just render list, no wraper. + // page mode just render list, no wrapper. if (this.pagemode || this.scrollelement) { return renderList } @@ -590,7 +590,7 @@ ref: 'vsl', style: { display: 'block', - 'overflow-y': this.size >= this.remain ? 'auto' : 'inital', + 'overflow-y': this.size >= this.remain ? 'auto' : 'initial', height: this.size * this.remain + 'px' }, on: { From 6b7742e05facecbec770bbf93e040167615ba36d Mon Sep 17 00:00:00 2001 From: VanishMax Date: Sun, 1 Dec 2019 09:25:15 +0300 Subject: [PATCH 2/3] Add styling prop for child element --- src/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/index.js b/src/index.js index 0c8bec7..214b37a 100644 --- a/src/index.js +++ b/src/index.js @@ -59,6 +59,10 @@ type: String, default: '' }, + wstyle: { + type: Object, + default: () => ({}) + }, pagemode: { type: Boolean, default: false @@ -574,6 +578,7 @@ display: 'block', 'padding-top': paddingTop + 'px', 'padding-bottom': paddingBottom + 'px', + ...this.wstyle }, class: this.wclass, attrs: { From 20b4107ecdfff43f6e18608fdb2a564d8cfcde91 Mon Sep 17 00:00:00 2001 From: VanishMax Date: Sun, 1 Dec 2019 09:41:23 +0300 Subject: [PATCH 3/3] Document new property in README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index d24220a..8eeac8f 100644 --- a/README.md +++ b/README.md @@ -220,6 +220,7 @@ According to the demos above, here are lists of approximate statistics: | rtag | String | * | Default value is `div`, virtual-list root element tag name, in all cases it's style is set to `display: block;` | | wtag | String | * | Default value is `div`, virtual-list item wrapper element tag name, in all cases it's style is set to `display: block;` | | wclass | String | * | Default is no classname, virtual-list item wrapper element class, if assign this prop, you better **not** to change it's [CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model). | +| wstyle | Object | * | Default value is `{}`, though you can add your own styles for a child element except `display` and `padding` because they are used by the library | > Props of scroll mode: