Skip to content

Commit 71da6c7

Browse files
tangbctangbc
committed
Go back to totop and to bottom
1 parent 87fbbe6 commit 71da6c7

File tree

4 files changed

+33
-33
lines changed

4 files changed

+33
-33
lines changed

‎README.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ npm install vue-virtual-scroll-list --save
8383
data () {
8484
return {
8585
itemComponent: Item,
86-
items: [ {uid: 'unique_1'}, {uid: 'unique_2'}, {uid: 'unique_3'}, ... ]
86+
items: [ {uid: 'unique_1'}, {uid: 'unique_2'}, ... ]
8787
}
8888
},
8989
components: { 'virtual-list': VirtualList }
@@ -99,35 +99,35 @@ More usages or getting start you can refer to these clearly [examples](https://t
9999
### Required props
100100

101101
| **             Prop             ** | **Type** | **Description** |
102-
|------------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------|
103-
| `size` | Number | Each item size, you don't have to know the accurate, just simply assign an **estimate** or **average** value. |
104-
| `keeps` | Number | How many items you are expecting the list to keep rendering in the real dom. |
105-
| `data-key` | String | The unique key get from `data-sources` in each data object, its value **must be unique** in `data-sources`, it is used for identifying item size. |
106-
| `data-sources` | Array | The source array built for list, each array data must be an object and has an unique key for `data-key` property. |
107-
| `data-component` | Component | The render item component created / declared by vue, and it will use the data object in `datas-sources` as render props. |
102+
|------------------|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
103+
| `size` | Number | Each item size, you don't have to know the accurate, just simply assign an **estimate** or **average** value. |
104+
| `keeps` | Number | How many items you are expecting the list to keep rendering in the real dom. |
105+
| `data-key` | String | The unique key get from `data-sources` in each data object, its value **must be unique** in `data-sources`, it is used for identifying item size. |
106+
| `data-sources` | Array[Object] | The source array built for list, each array data must be an object and has an unique key for `data-key` property. |
107+
| `data-component` | Component | The render item component created / declared by vue, and it will use the data object in `datas-sources` as render props. |
108108

109109
### Optional props
110110

111111
| **              Prop              ** | **Type** | **Default** | **Description** |
112-
|-------------------|----------|-------------|------------------------------------------------------------------------|
113-
| `root-tag` | String | div | Root element tag name. |
114-
| `wrap-tag` | String | div | List wrapper element tag name. |
115-
| `item-tag` | String | div | Item wrapper element tag name. |
116-
| `wrap-class` | String | | List wrapper element class name. |
117-
| `item-class` | String | | Item wrapper element class name. |
118-
| `start` | Number | 0 | Setting scroll stay start index. |
119-
| `offset` | Number | 0 | Setting scroll stay offset. |
120-
| `direction` | String | vertical | Scroll direction, available values are `vertical` and `horizontal`. |
121-
| `scroll` | Function | | Emited when scrolling, param `(event, range)`. |
122-
| `toupper` | Function | | Emited when scrolled to top or left, param `(event, range)`. |
123-
| `tolower` | Function | | Emited when scrolled to bottom or right, param `(event, range)`. |
124-
| `upper-threshold` | Number | 0 | The threshold to emit `toupper` event, attention to multiple calls. |
125-
| `lower-threshold` | Number | 0 | The threshold to emit `tolower` event, attention to multiple calls. |
126-
| `header-tag` | String | div | For using header slot, header slot wrapper element tag name. |
127-
| `footer-tag` | String | div | For using footer slot, footer slot wrapper element tag name. |
128-
| `header-class` | String | | For using header slot, header slot wrapper element class name. |
129-
| `footer-class` | String | | For using footer slot, footer slot wrapper element class name. |
130-
| `disabled` | Boolean | false | Disable virtual list and always render all items (**just a trial prop**). |
112+
|--------------------|----------|-------------|------------------------------------------------------------------------|
113+
| `root-tag` | String | div | Root element tag name. |
114+
| `wrap-tag` | String | div | List wrapper element tag name. |
115+
| `item-tag` | String | div | Item wrapper element tag name. |
116+
| `wrap-class` | String | | List wrapper element class name. |
117+
| `item-class` | String | | Item wrapper element class name. |
118+
| `start` | Number | 0 | Setting scroll stay start index. |
119+
| `offset` | Number | 0 | Setting scroll stay offset. |
120+
| `direction` | String | vertical | Scroll direction, available values are `vertical` and `horizontal`. |
121+
| `scroll` | Function | | Emited when scrolling, param `(event, range)`. |
122+
| `totop` | Function | | Emited when scrolled to top or left, param `(event, range)`. |
123+
| `tobottom` | Function | | Emited when scrolled to bottom or right, param `(event, range)`. |
124+
| `top-threshold` | Number | 0 | The threshold to emit `totop` event, attention to multiple calls. |
125+
| `bottom-threshold` | Number | 0 | The threshold to emit `tobottom` event, attention to multiple calls. |
126+
| `header-tag` | String | div | For using header slot, header slot wrapper element tag name. |
127+
| `footer-tag` | String | div | For using footer slot, footer slot wrapper element tag name. |
128+
| `header-class` | String | | For using header slot, header slot wrapper element class name. |
129+
| `footer-class` | String | | For using footer slot, footer slot wrapper element class name. |
130+
| `disabled` | Boolean | false | Disable virtual list and always render all items (**just a trial prop**). |
131131

132132

133133
## Attentions

‎example/src/views/infinite-loading/Code.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const html =
1414
:data-key="'id'"
1515
:data-sources="items"
1616
:data-component="itemComponent"
17-
v-on:tolower="onScrollToBottom"
17+
v-on:tobottom="onScrollToBottom"
1818
>
1919
<div slot="footer" class="loading-spinner">Loading ...</div>
2020
</virtual-list>

‎example/src/views/infinite-loading/Main.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
:data-sources="items"
2020
:data-component="itemComponent"
2121

22-
v-on:toupper="onScrollToUpper"
23-
v-on:tolower="onScrollToLower"
22+
v-on:totop="onScrollToTop"
23+
v-on:tobottom="onScrollToBottom"
2424
>
2525
<div slot="footer" class="loader"></div>
2626
</virtual-list>
@@ -79,11 +79,11 @@ export default {
7979
this.isShowView = type === TAB_TYPE.VIEW
8080
},
8181
82-
onScrollToUpper () {
82+
onScrollToTop () {
8383
console.log('at top')
8484
},
8585
86-
onScrollToLower () {
86+
onScrollToBottom () {
8787
console.log('at bottom')
8888
8989
if (this.isLoading) {

‎src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,9 +136,9 @@ const VirtualList = Vue.component(NAME, {
136136
const scrollShape = root[this.isHorizontal ? 'scrollWidth' : 'scrollHeight']
137137

138138
if (isUpper && !!this.dataSources.length && offset - this.upperThreshold <= 0) {
139-
this.$emit('toupper', evt, range)
139+
this.$emit('totop', evt, range)
140140
} else if (isLower && offset + offsetShape + this.lowerThreshold >= scrollShape) {
141-
this.$emit('tolower', evt, range)
141+
this.$emit('tobottom', evt, range)
142142
} else {
143143
this.$emit('scroll', evt, range)
144144
}

0 commit comments

Comments
 (0)