mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] PullRefresh: jsx (#2616)
This commit is contained in:
neverland
GitHub
parent
377635cb9a
commit
8e2b0f42fc
@ -1,42 +1,11 @@
|
||||
<template>
|
||||
<div :class="b()">
|
||||
<div
|
||||
:class="b('track')"
|
||||
:style="style"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
@touchcancel="onTouchEnd"
|
||||
>
|
||||
<div :class="b('head')">
|
||||
<slot :name="status">
|
||||
<div
|
||||
v-if="status === 'pulling' || status === 'loosing'"
|
||||
v-text="text"
|
||||
:class="b('text')"
|
||||
/>
|
||||
<div
|
||||
v-if="status === 'loading'"
|
||||
:class="b('loading')"
|
||||
>
|
||||
<loading />
|
||||
<span v-text="text" />
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
import { use } from '../utils';
|
||||
import Loading from '../loading';
|
||||
import scrollUtils from '../utils/scroll';
|
||||
import Touch from '../mixins/touch';
|
||||
|
||||
export default create({
|
||||
name: 'pull-refresh',
|
||||
const [sfc, bem, t] = use('pull-refresh');
|
||||
|
||||
export default sfc({
|
||||
mixins: [Touch],
|
||||
|
||||
props: {
|
||||
@ -67,19 +36,8 @@ export default create({
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
return {
|
||||
transition: `${this.duration}ms`,
|
||||
transform: `translate3d(0,${this.height}px, 0)`
|
||||
};
|
||||
},
|
||||
|
||||
untouchable() {
|
||||
return this.status === 'loading' || this.disabled;
|
||||
},
|
||||
|
||||
text() {
|
||||
return this[`${this.status}Text`] || this.$t(this.status);
|
||||
}
|
||||
},
|
||||
|
||||
@ -154,14 +112,51 @@ export default create({
|
||||
this.height = height;
|
||||
|
||||
const status = isLoading
|
||||
? 'loading' : height === 0
|
||||
? 'normal' : height < this.headHeight
|
||||
? 'pulling' : 'loosing';
|
||||
? 'loading'
|
||||
: height === 0
|
||||
? 'normal'
|
||||
: height < this.headHeight
|
||||
? 'pulling'
|
||||
: 'loosing';
|
||||
|
||||
if (status !== this.status) {
|
||||
this.status = status;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { status } = this;
|
||||
const text = this[`${status}Text`] || t(status);
|
||||
const style = {
|
||||
transition: `${this.duration}ms`,
|
||||
transform: `translate3d(0,${this.height}px, 0)`
|
||||
};
|
||||
|
||||
const Status = this.$slots[status] || [
|
||||
(status === 'pulling' || status === 'loosing') && <div class={bem('text')}>{text}</div>,
|
||||
status === 'loading' && (
|
||||
<div class={bem('loading')}>
|
||||
<Loading />
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
)
|
||||
];
|
||||
|
||||
return (
|
||||
<div class={bem()}>
|
||||
<div
|
||||
class={bem('track')}
|
||||
style={style}
|
||||
onTouchstart={this.onTouchStart}
|
||||
onTouchmove={this.onTouchMove}
|
||||
onTouchend={this.onTouchEnd}
|
||||
onTouchcancel={this.onTouchEnd}
|
||||
>
|
||||
<div class={bem('head')}>{Status}</div>
|
||||
{this.$slots.default}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -4,10 +4,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transition:0ms;transform:translate3d(0,0px, 0);">
|
||||
<div class="van-pull-refresh__head">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-pull-refresh__head"></div>
|
||||
<div>
|
||||
<p>刷新次数: 0</p>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,6 @@ exports[`change head content when pulling down 1`] = `
|
||||
<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>
|
||||
@ -15,8 +14,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>
|
||||
</div>
|
||||
@ -26,9 +24,8 @@ 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>
|
||||
@ -39,9 +36,8 @@ 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>
|
||||
@ -51,10 +47,7 @@ exports[`change head content when pulling down 4`] = `
|
||||
exports[`change head content when pulling down 5`] = `
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transform: translate3d(0,0px, 0);">
|
||||
<div class="van-pull-refresh__head">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-pull-refresh__head"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -62,10 +55,7 @@ exports[`change head content when pulling down 5`] = `
|
||||
exports[`not in page top 1`] = `
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transform: translate3d(0,0px, 0);">
|
||||
<div class="van-pull-refresh__head">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-pull-refresh__head"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user