Skip to content

Fix typos and add styling prop for child element #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 1, 2019
Merged

Fix typos and add styling prop for child element #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6942f8
Fix typos and misspelling mistakes
VanishMax Dec 1, 2019
6b7742e
Add styling prop for child element
VanishMax Dec 1, 2019
20b4107
Document new property in README
VanishMax Dec 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,5 @@ coverage
demos/dev/
demos/dev*/
demos/**/*.map
.idea
.vscode
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

49 changes: 27 additions & 22 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@
type: String,
default: ''
},
wstyle: {
type: Object,
default: () => ({})
},
pagemode: {
type: Boolean,
default: false
Expand Down Expand Up @@ -88,15 +92,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: {
Expand All @@ -118,7 +122,7 @@
}
},

// use changeProp to identify which prop change.
// use changeProp to identify the prop change.
watch: {
size () {
this.changeProp = 'size'
Expand Down Expand Up @@ -303,8 +307,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 &&
Expand All @@ -314,7 +318,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 ||
Expand All @@ -326,7 +330,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
Expand All @@ -350,8 +354,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()
Expand All @@ -365,7 +369,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
Expand Down Expand Up @@ -444,28 +448,28 @@
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`.
getVarPaddingTop () {
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) {
Expand All @@ -477,7 +481,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)
},

Expand All @@ -502,12 +506,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) {
Expand Down Expand Up @@ -573,15 +577,16 @@
style: {
display: 'block',
'padding-top': paddingTop + 'px',
'padding-bottom': paddingBottom + 'px'
'padding-bottom': paddingBottom + 'px',
...this.wstyle
},
class: this.wclass,
attrs: {
role: 'group'
}
}, list)

// page mode just render list, no wraper.
// page mode just render list, no wrapper.
if (this.pagemode || this.scrollelement) {
return renderList
}
Expand All @@ -590,7 +595,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: {
Expand Down