Skip to content

Commit 84c6c18

Browse files
KyLeoHCKyLeoHC
committed
feat: 'keep' param work with 'keep-alive' component
1 parent b6ec944 commit 84c6c18

File tree

7 files changed

+81
-21
lines changed

7 files changed

+81
-21
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ Available `Prop` :
126126
:--- | :--- | :--- | :--- |
127127
| heights | Array | ✓ | A array contains all height of your item. |
128128
| remain | Number | * | The number of item that show in view port.(default `10`) |
129+
| keep | Boolean | * | Work with `keep-alive` component,keep scroll position after activated.(default `false`) |
129130
| enabled | Boolean | * | If you want to render all data directly,please set 'false' for this option.But `toTop`、`toBottom` and `scrolling` event is still available.(default `true`) |
130131

131132
Available `Event` :

‎dist/vue-scroll-list.common.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,18 @@ var component = {
1313
enabled: {
1414
type: Boolean,
1515
default: true
16+
},
17+
keep: {
18+
type: Boolean,
19+
default: false
1620
}
1721
},
22+
data: function data() {
23+
return {
24+
scrollTop: 0
25+
};
26+
},
27+
1828
delta: { // an extra object helping to calculate
1929
start: 0, // start index
2030
end: 0, // end index
@@ -26,11 +36,11 @@ var component = {
2636
},
2737
methods: {
2838
handleScroll: function handleScroll(event) {
39+
console.log(event);
2940
var scrollTop = this.$el.scrollTop;
30-
3141
this.$emit('scrolling', event);
32-
3342
this.enabled ? this.updateZone(scrollTop) : this.updateZoneNormally(scrollTop);
43+
this.scrollTop = scrollTop;
3444
},
3545
updateZoneNormally: function updateZoneNormally(offset) {
3646
// handle the scroll event normally
@@ -100,7 +110,7 @@ var component = {
100110
var topList = this.heights.slice(0, delta.start);
101111
var bottomList = this.heights.slice(delta.end + 1);
102112
delta.total = slots.length;
103-
// consider that the item height may change in any case
113+
// consider that the height of item may change in any case
104114
// so we compute paddingTop and paddingBottom every time
105115
delta.paddingTop = topList.length ? topList.reduce(function (a, b) {
106116
return a + b;
@@ -122,6 +132,11 @@ var component = {
122132
delta.keeps = remains + delta.reserve;
123133
}
124134
},
135+
activated: function activated() {
136+
// while work with keep-alive component
137+
// set scroll position after 'activated'
138+
this.$el.scrollTop = this.keep ? this.scrollTop || 1 : 1;
139+
},
125140
render: function render(h) {
126141
var showList = this.enabled ? this.filter(this.$slots.default) : this.$slots.default;
127142
var delta = this.$options.delta;

‎dist/vue-scroll-list.esm.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,18 @@ var component = {
1111
enabled: {
1212
type: Boolean,
1313
default: true
14+
},
15+
keep: {
16+
type: Boolean,
17+
default: false
1418
}
1519
},
20+
data: function data() {
21+
return {
22+
scrollTop: 0
23+
};
24+
},
25+
1626
delta: { // an extra object helping to calculate
1727
start: 0, // start index
1828
end: 0, // end index
@@ -24,11 +34,11 @@ var component = {
2434
},
2535
methods: {
2636
handleScroll: function handleScroll(event) {
37+
console.log(event);
2738
var scrollTop = this.$el.scrollTop;
28-
2939
this.$emit('scrolling', event);
30-
3140
this.enabled ? this.updateZone(scrollTop) : this.updateZoneNormally(scrollTop);
41+
this.scrollTop = scrollTop;
3242
},
3343
updateZoneNormally: function updateZoneNormally(offset) {
3444
// handle the scroll event normally
@@ -98,7 +108,7 @@ var component = {
98108
var topList = this.heights.slice(0, delta.start);
99109
var bottomList = this.heights.slice(delta.end + 1);
100110
delta.total = slots.length;
101-
// consider that the item height may change in any case
111+
// consider that the height of item may change in any case
102112
// so we compute paddingTop and paddingBottom every time
103113
delta.paddingTop = topList.length ? topList.reduce(function (a, b) {
104114
return a + b;
@@ -120,6 +130,11 @@ var component = {
120130
delta.keeps = remains + delta.reserve;
121131
}
122132
},
133+
activated: function activated() {
134+
// while work with keep-alive component
135+
// set scroll position after 'activated'
136+
this.$el.scrollTop = this.keep ? this.scrollTop || 1 : 1;
137+
},
123138
render: function render(h) {
124139
var showList = this.enabled ? this.filter(this.$slots.default) : this.$slots.default;
125140
var delta = this.$options.delta;

‎dist/vue-scroll-list.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,18 @@ var component = {
1717
enabled: {
1818
type: Boolean,
1919
default: true
20+
},
21+
keep: {
22+
type: Boolean,
23+
default: false
2024
}
2125
},
26+
data: function data() {
27+
return {
28+
scrollTop: 0
29+
};
30+
},
31+
2232
delta: { // an extra object helping to calculate
2333
start: 0, // start index
2434
end: 0, // end index
@@ -30,11 +40,11 @@ var component = {
3040
},
3141
methods: {
3242
handleScroll: function handleScroll(event) {
43+
console.log(event);
3344
var scrollTop = this.$el.scrollTop;
34-
3545
this.$emit('scrolling', event);
36-
3746
this.enabled ? this.updateZone(scrollTop) : this.updateZoneNormally(scrollTop);
47+
this.scrollTop = scrollTop;
3848
},
3949
updateZoneNormally: function updateZoneNormally(offset) {
4050
// handle the scroll event normally
@@ -104,7 +114,7 @@ var component = {
104114
var topList = this.heights.slice(0, delta.start);
105115
var bottomList = this.heights.slice(delta.end + 1);
106116
delta.total = slots.length;
107-
// consider that the item height may change in any case
117+
// consider that the height of item may change in any case
108118
// so we compute paddingTop and paddingBottom every time
109119
delta.paddingTop = topList.length ? topList.reduce(function (a, b) {
110120
return a + b;
@@ -126,6 +136,11 @@ var component = {
126136
delta.keeps = remains + delta.reserve;
127137
}
128138
},
139+
activated: function activated() {
140+
// while work with keep-alive component
141+
// set scroll position after 'activated'
142+
this.$el.scrollTop = this.keep ? this.scrollTop || 1 : 1;
143+
},
129144
render: function render(h) {
130145
var showList = this.enabled ? this.filter(this.$slots.default) : this.$slots.default;
131146
var delta = this.$options.delta;

‎example/App.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
switch view
1111
</div>
1212
<keep-alive>
13-
<component :is="view"></component>
13+
<component :is="view"
14+
:count.sync="count">
15+
</component>
1416
</keep-alive>
1517
</div>
1618
</template>

‎example/componentA.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<scroll-list :heights="heightList"
44
:remain="10"
55
:enabled="true"
6+
:keep="true"
67
@toTop="onTop"
78
@toBottom="onBottom"
89
@scrolling="onScroll">

‎src/index.js‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
let component = {
1+
const component = {
22
props: {
33
heights: {
44
type: Array,
@@ -11,8 +11,17 @@ let component = {
1111
enabled: {
1212
type: Boolean,
1313
default: true
14+
},
15+
keep: {
16+
type: Boolean,
17+
default: false
1418
}
1519
},
20+
data() {
21+
return {
22+
scrollTop: 0
23+
};
24+
},
1625
delta: { // an extra object helping to calculate
1726
start: 0, // start index
1827
end: 0, // end index
@@ -24,16 +33,16 @@ let component = {
2433
},
2534
methods: {
2635
handleScroll(event) {
27-
let scrollTop = this.$el.scrollTop;
28-
36+
console.log(event);
37+
const scrollTop = this.$el.scrollTop;
2938
this.$emit('scrolling', event);
30-
3139
this.enabled ? this.updateZone(scrollTop) : this.updateZoneNormally(scrollTop);
40+
this.scrollTop = scrollTop;
3241
},
3342
updateZoneNormally(offset) {
3443
// handle the scroll event normally
35-
let scrollHeight = this.$el.scrollHeight;
36-
let clientHeight = this.$el.clientHeight;
44+
const scrollHeight = this.$el.scrollHeight;
45+
const clientHeight = this.$el.clientHeight;
3746
if (offset === 0) {
3847
this.$emit('toTop');
3948
} else if (offset + clientHeight + 5 >= scrollHeight) {
@@ -98,7 +107,7 @@ let component = {
98107
let topList = this.heights.slice(0, delta.start);
99108
let bottomList = this.heights.slice(delta.end + 1);
100109
delta.total = slots.length;
101-
// consider that the item height may change in any case
110+
// consider that the height of item may change in any case
102111
// so we compute paddingTop and paddingBottom every time
103112
delta.paddingTop = topList.length ? topList.reduce((a, b) => {
104113
return a + b;
@@ -120,12 +129,14 @@ let component = {
120129
delta.keeps = remains + delta.reserve;
121130
}
122131
},
123-
deactivated() {
124-
this.updateZone(1);
132+
activated() {
133+
// while work with keep-alive component
134+
// set scroll position after 'activated'
135+
this.$el.scrollTop = this.keep ? (this.scrollTop || 1) : 1;
125136
},
126137
render(h) {
127-
let showList = this.enabled ? this.filter(this.$slots.default) : this.$slots.default;
128-
let delta = this.$options.delta;
138+
const showList = this.enabled ? this.filter(this.$slots.default) : this.$slots.default;
139+
const delta = this.$options.delta;
129140

130141
return h('div', {
131142
class: {

0 commit comments

Comments
 (0)