Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(pull-down-refresh): update docs and demo #470

Merged
merged 5 commits into from
Nov 10, 2022
Merged

docs(pull-down-refresh): update docs and demo #470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
40f9eaa
docs(pull-down-refresh): update docs and demo
yuanmeda Nov 8, 2022
2537dd2
fix(pull-down-refresh): update snap
yuanmeda Nov 8, 2022
a615469
fix(pull-down-refresh): fix cr
yuanmeda Nov 8, 2022
8eeada3
fix(pull-down-refresh): fix cr
yuanmeda Nov 10, 2022
bc51be7
fix(pull-down-refresh): delete file
yuanmeda Nov 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 92 additions & 154 deletions src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,28 @@

exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
<div
class="tdesign-mobile-demo"
class="t-pull-down-refresh"
>
<div
class="tdesign-mobile-demo-block"
class="t-pull-down-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
>
<!--v-if-->
<!--v-if-->

<div
class="t-pull-down-refresh"
class="t-pull-down-refresh__max"
style="height: 80px;"
>
<div
class="t-pull-down-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
class="t-pull-down-refresh__loading"
style="height: 50px;"
>
<div
class="t-pull-down-refresh__max"
style="height: 80px;"
>
<div
class="t-pull-down-refresh__loading"
style="height: 50px;"
>
<div />
</div>
</div>

下拉刷新

<div />
</div>
</div>


下拉刷新


</div>
</div>
`;
Expand Down Expand Up @@ -80,10 +70,8 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
<div
class="tdesign-mobile-demo"
data-v-43d0a031=""
style="background-color: rgb(255, 255, 255); height: 100vh;"
>
<!-- &lt;h1 class="title"&gt;PullDownRefresh 下拉刷新&lt;/h1&gt;
&lt;p class="summary"&gt;用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。&lt;/p&gt;
&lt;p class="blank"&gt;&lt;/p&gt; -->
<div
class="tdesign-mobile-demo-block"
data-v-43d0a031=""
Expand All @@ -92,187 +80,137 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
<!--v-if-->

<div
class="t-tabs t-is-top t-size-m"
class="t-pull-down-refresh"
data-v-43d0a031=""
>
<div
class="t-sticky"
style="height: 0px;"
class="t-pull-down-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
>
<div
class="t-sticky__content"
style="z-index: 99;"
class="t-pull-down-refresh__max"
style="height: 80px;"
>

<div
class="t-tabs__nav"
class="t-pull-down-refresh__loading"
style="height: 50px;"
>
<div
class="t-tabs__nav-container"
>
<div
class="t-tabs__nav-wrap"
>

<div
class="t-tabs__nav-item t-is-active"
>
基础用法
</div>
<div
class="t-tabs__nav-item"
>
自定义文案
</div>
<div
class="t-tabs__nav-item"
>
超时事件
</div>

<div
class="t-tabs__nav-line"
style=""
/>
</div>
</div>
<div />
</div>

</div>
</div>
<div
class="t-tabs__content"
>


<h1
class="title"
data-v-43d0a031=""
>
PullDownRefresh 下拉刷新
</h1>
<p
class="summary"
data-v-43d0a031=""
>
用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。
</p>
<div
class="t-tab-panel t-tabs__panel"
class="tdesign-mobile-block"
data-v-43d0a031=""
>
拖拽该区域演示 顶部下拉刷新
</div>
<div
class="group"
data-v-43d0a031=""
value="first"
>

<div
class="refresh-content"
class="t-skeleton item"
data-v-43d0a031=""
>

<div
class="t-pull-down-refresh demo-pull-down-refresh"
data-v-43d0a031=""
class="t-skeleton__content"
>

<div
class="t-pull-down-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
class="t-skeleton__row"
>
<div
class="t-pull-down-refresh__max"
style="height: 80px;"
>
<div
class="t-pull-down-refresh__loading"
style="height: 50px;"
>
<div />
</div>
</div>

<div
class="content-text"
data-v-43d0a031=""
>
已下拉0次
</div>
class="t-skeleton__col t-skeleton--type-text"
/>

</div>
</div>
</div>

</div>
<div
class="t-tab-panel t-tabs__panel"
data-v-43d0a031=""
style="display: none;"
value="second"
>

<div
class="refresh-content"
data-v-43d0a031=""
>
<div
class="t-pull-down-refresh demo-pull-down-refresh"
data-v-43d0a031=""
>
<div
class="t-pull-down-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
class="t-skeleton__row"
>

<div
class="t-pull-down-refresh__max"
style="height: 80px;"
>
<div
class="t-pull-down-refresh__loading"
style="height: 50px;"
>
<div />
</div>
</div>
class="t-skeleton__col t-skeleton--type-text"
style="width: 100px;"
/>

</div>
<div
class="t-skeleton__row"
>

<div
class="content-text"
data-v-43d0a031=""
>
已下拉0次
</div>
class="t-skeleton__col t-skeleton--type-text"
style="width: 165.5px; height: 165.5px; border-radius: 12px;"
/>

</div>

</div>

</div>

</div>
<div
class="t-tab-panel t-tabs__panel"
data-v-43d0a031=""
style="display: none;"
value="third"
>

<div
class="refresh-content"
class="t-skeleton item"
data-v-43d0a031=""
>

<div
class="t-pull-down-refresh demo-pull-down-refresh"
data-v-43d0a031=""
class="t-skeleton__content"
>

<div
class="t-pull-down-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
class="t-skeleton__row"
>

<div
class="t-pull-down-refresh__max"
style="height: 80px;"
>
<div
class="t-pull-down-refresh__loading"
style="height: 50px;"
>
<div />
</div>
</div>
class="t-skeleton__col t-skeleton--type-text"
/>

</div>
<div
class="t-skeleton__row"
>

<div
class="t-skeleton__col t-skeleton--type-text"
style="width: 100px;"
/>

</div>
<div
class="t-skeleton__row"
>

<div
class="content-text"
data-v-43d0a031=""
>
已下拉0次
</div>
class="t-skeleton__col t-skeleton--type-text"
style="width: 165.5px; height: 165.5px; border-radius: 12px;"
/>

</div>

</div>

</div>

</div>


</div>
</div>

Expand Down
42 changes: 16 additions & 26 deletions src/pull-down-refresh/demos/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,23 @@
<template>
<div class="tdesign-mobile-demo">
<tdesign-demo-block title="" summary="">
<t-pull-down-refresh v-model="refreshing" @refresh="handleRefresh">下拉刷新</t-pull-down-refresh>
</tdesign-demo-block>
</div>
<t-pull-down-refresh
v-model="refreshing"
:loading-texts="['下拉刷新', '松开刷新', '正在刷新', '刷新完成']"
@refresh="handleRefresh"
>
<slot> 下拉刷新 </slot>
</t-pull-down-refresh>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';

export default defineComponent({
setup(props, context) {
const refreshing = ref(false);
const handleRefresh = (value: any) => {
refreshing.value = true;
setTimeout(() => {
refreshing.value = false;
}, 1000);
};
return {
refreshing,
handleRefresh,
};
},
data() {
return {};
},
methods: {},
});
const refreshing = ref(false);
const handleRefresh = (value: any) => {
refreshing.value = true;
setTimeout(() => {
refreshing.value = false;
}, 1000);
};
</script>

<style lang="less" scoped></style>
Loading