alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[improvement] PullRerefresh: use dynamic slot (#2409)

Browse Source
This commit is contained in:
neverland
2018-12-30 21:42:51 +08:00
committed by GitHub
parent d0fa4152dc
commit 4572681eed
17 changed files with 34 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/pull-refresh/index.vue
+17 -37
View File
@@ -9,35 +9,18 @@
@touchcancel="onTouchEnd"
>
<div :class="b('head')">
<slot
v-if="status === 'normal'"
name="normal"
/>
<slot
v-if="status === 'pulling'"
name="pulling"
>
<slot :name="status">
<div
v-text="pullingText || $t('pulling')"
v-if="status === 'pulling' || status === 'loosing'"
v-text="text"
:class="b('text')"
/>
</slot>
<slot
v-if="status === 'loosing'"
name="loosing"
>
<div
v-text="loosingText || $t('loosing')"
:class="b('text')"
/>
</slot>
<slot
v-if="status === 'loading'"
name="loading"
>
<div :class="b('loading')">
v-if="status === 'loading'"
:class="b('loading')"
>
<loading />
<span v-text="loadingText || $t('loadingTip')" />
<span v-text="text" />
</div>
</slot>
</div>
@@ -93,11 +76,11 @@ export default create({
untouchable() {
return this.status === 'loading' || this.disabled;
}
},
},
mounted() {
this.scrollEl = scrollUtils.getScrollEventTarget(this.$el);
text() {
return this[`${this.status}Text`] || this.$t(this.status);
}
},
watch: {
@@ -107,12 +90,13 @@ export default create({
}
},
mounted() {
this.scrollEl = scrollUtils.getScrollEventTarget(this.$el);
},
methods: {
onTouchStart(event) {
if (this.untouchable) {
return;
}
if (this.getCeiling()) {
if (!this.untouchable && this.getCeiling()) {
this.duration = 0;
this.touchStart(event);
}
@@ -140,11 +124,7 @@ export default create({
},
onTouchEnd() {
if (this.untouchable) {
return;
}
if (this.ceiling && this.deltaY) {
if (!this.untouchable && this.ceiling && this.deltaY) {
this.duration = this.animationDuration;
if (this.status === 'loosing') {
this.getStatus(this.headHeight, true);
packages/pull-refresh/test/__snapshots__/demo.spec.js.snap
-1
View File
@@ -7,7 +7,6 @@ exports[`renders demo correctly 1`] = `
<div class="van-pull-refresh__head">
<!---->
<!---->
<!---->
</div>
<div>
<p>刷新次数: 0</p>
packages/pull-refresh/test/__snapshots__/index.spec.js.snap
+3 -13
View File
@@ -4,10 +4,8 @@ exports[`change head content when pulling down 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transform: translate3d(0,20px, 0);">
<div class="van-pull-refresh__head">
<!---->
<div class="van-pull-refresh__text">下拉即可刷新...</div>
<!---->
<!---->
</div>
</div>
</div>
@@ -17,9 +15,7 @@ exports[`change head content when pulling down 2`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transform: translate3d(0,75px, 0);">
<div class="van-pull-refresh__head">
<!---->
<!---->
<div class="van-pull-refresh__text">释放即可刷新...</div>
<div class="van-pull-refresh__text">下拉即可刷新...</div>
<!---->
</div>
</div>
@@ -30,11 +26,9 @@ exports[`change head content when pulling down 3`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head">
<!---->
<!---->
<!---->
<div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>加载中...</span>
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>释放即可刷新...</span>
</div>
</div>
</div>
@@ -45,11 +39,9 @@ exports[`change head content when pulling down 4`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head">
<!---->
<!---->
<!---->
<div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>加载中...</span>
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>释放即可刷新...</span>
</div>
</div>
</div>
@@ -62,7 +54,6 @@ exports[`change head content when pulling down 5`] = `
<div class="van-pull-refresh__head">
<!---->
<!---->
<!---->
</div>
</div>
</div>
@@ -74,7 +65,6 @@ exports[`not in page top 1`] = `
<div class="van-pull-refresh__head">
<!---->
<!---->
<!---->
</div>
</div>
</div>