diff --git a/src/list/index.js b/src/list/index.js
index f7f22a132..a824d1f29 100644
--- a/src/list/index.js
+++ b/src/list/index.js
@@ -42,6 +42,13 @@ export default createComponent({
}
},
+ data() {
+ return {
+ // use sync innerLoading state to avoid repeated loading in some edge cases
+ innerLoading: this.loading
+ };
+ },
+
mounted() {
if (this.immediateCheck) {
this.check();
@@ -49,14 +56,17 @@ export default createComponent({
},
watch: {
- loading: 'check',
- finished: 'check'
+ finished: 'check',
+ loading(val) {
+ this.innerLoading = val;
+ this.check();
+ }
},
methods: {
check() {
this.$nextTick(() => {
- if (this.loading || this.finished || this.error) {
+ if (this.innerLoading || this.finished || this.error) {
return;
}
@@ -89,6 +99,7 @@ export default createComponent({
}
if (isReachEdge) {
+ this.innerLoading = true;
this.$emit('input', true);
this.$emit('load');
}
@@ -98,6 +109,36 @@ export default createComponent({
clickErrorText() {
this.$emit('update:error', false);
this.check();
+ },
+
+ genLoading() {
+ if (this.innerLoading) {
+ return (
+
+ {this.slots('loading') || (
+ {this.loadingText || t('loading')}
+ )}
+
+ );
+ }
+ },
+
+ genFinishedText() {
+ if (this.finished && this.finishedText) {
+ return (
+ {this.finishedText}
+ );
+ }
+ },
+
+ genErrorText() {
+ if (this.error && this.errorText) {
+ return (
+
+ {this.errorText}
+
+ );
+ }
}
},
@@ -105,23 +146,11 @@ export default createComponent({
const Placeholder = ;
return (
-
+
{this.direction === 'down' ? this.slots() : Placeholder}
- {this.loading && (
-
- {this.slots('loading') || (
- {this.loadingText || t('loading')}
- )}
-
- )}
- {this.finished && this.finishedText && (
-
{this.finishedText}
- )}
- {this.error && this.errorText && (
-
- {this.errorText}
-
- )}
+ {this.genLoading()}
+ {this.genFinishedText()}
+ {this.genErrorText()}
{this.direction === 'up' ? this.slots() : Placeholder}
);
diff --git a/src/list/test/index.spec.js b/src/list/test/index.spec.js
index c13606d53..8a709bfec 100644
--- a/src/list/test/index.spec.js
+++ b/src/list/test/index.spec.js
@@ -108,7 +108,7 @@ test('check the case that scroller is not window', async () => {
restoreMock();
});
-test('check the direction props', async () => {
+test('check the direction props', () => {
const wrapper = mount(List, {
slots: {
default: '
list item
'
@@ -118,8 +118,6 @@ test('check the direction props', async () => {
}
});
- await later();
-
let children = wrapper.findAll('.van-list > div');
expect(children.at(0).is('.van-list__placeholder')).toBeTruthy();
expect(children.at(1).is('.list-item')).toBeTruthy();
@@ -129,7 +127,6 @@ test('check the direction props', async () => {
direction: 'down'
});
- await later();
children = wrapper.findAll('.van-list > div');
expect(children.at(0).is('.list-item')).toBeTruthy();
expect(children.at(1).is('.van-list__placeholder')).toBeTruthy();