From 93953a50c888737c9d53d790bce3a85133927442 Mon Sep 17 00:00:00 2001 From: betavs <34408516+betavs@users.noreply.github.com> Date: Wed, 1 Nov 2023 10:59:46 +0800 Subject: [PATCH] feat(back-top): enable property scroll-top and visibility-height (#2177) * feat(back-top): enable property scroll-top and visibility-height * test: update snapshots --- src/back-top/README.en-US.md | 2 ++ src/back-top/README.md | 3 +++ .../__test__/__snapshots__/demo.test.js.snap | 2 ++ src/back-top/_example/back-top.ts | 5 +++-- src/back-top/_example/back-top.wxml | 4 ++-- src/back-top/_example/base/index.js | 3 +++ src/back-top/_example/base/index.wxml | 7 ++++++- src/back-top/_example/half-round/index.js | 3 +++ src/back-top/_example/half-round/index.wxml | 7 ++++++- src/back-top/back-top.ts | 7 +++++++ src/back-top/back-top.wxml | 1 + src/back-top/props.ts | 10 ++++++++++ src/back-top/type.ts | 14 ++++++++++++++ .../__test__/__snapshots__/demo.test.js.snap | 7 ++++++- src/pull-down-refresh/_example/base/index.js | 10 ++++------ src/pull-down-refresh/_example/base/index.wxml | 2 +- 16 files changed, 73 insertions(+), 14 deletions(-) diff --git a/src/back-top/README.en-US.md b/src/back-top/README.en-US.md index 8a4b150f2..88439ff91 100644 --- a/src/back-top/README.en-US.md +++ b/src/back-top/README.en-US.md @@ -7,6 +7,8 @@ name | type | default | description | required -- | -- | -- | -- | -- external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N +visibility-height | Number | 200 | \- | N +scroll-top | Number | 0 | \- | N fixed | Boolean | true | \- | N icon | String / Boolean / Object / Slot | - | \- | N text | String | '' | \- | N diff --git a/src/back-top/README.md b/src/back-top/README.md index 3e6c441fa..818644735 100644 --- a/src/back-top/README.md +++ b/src/back-top/README.md @@ -29,6 +29,9 @@ isComponent: true 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- +external-classes | Array | - | 组件类名，分别用于设置外层元素、图标、文本内容等元素类名。`['t-class', 't-class-icon', 't-class-text']` | N +visibility-height | Number | 200 | 滚动高度达到此参数值才出现 | N +scroll-top | Number | 0 | 页面滚动距离 | N fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N icon | String / Boolean / Object / Slot | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` | N text | String | '' | 文案 | N diff --git a/src/back-top/__test__/__snapshots__/demo.test.js.snap b/src/back-top/__test__/__snapshots__/demo.test.js.snap index 739b6a071..020d37396 100644 --- a/src/back-top/__test__/__snapshots__/demo.test.js.snap +++ b/src/back-top/__test__/__snapshots__/demo.test.js.snap @@ -3,6 +3,7 @@ exports[`BackTop BackTop base demo works fine 1`] = ` 100 }); + const { scrollTop } = e; + this.setData({ scrollTop }); }, onBtnClick(e: any) { diff --git a/src/back-top/_example/back-top.wxml b/src/back-top/_example/back-top.wxml index 34a21f155..fbe677e28 100644 --- a/src/back-top/_example/back-top.wxml +++ b/src/back-top/_example/back-top.wxml @@ -25,6 +25,6 @@ - - + + diff --git a/src/back-top/_example/base/index.js b/src/back-top/_example/base/index.js index 87173b185..c6454809a 100644 --- a/src/back-top/_example/base/index.js +++ b/src/back-top/_example/base/index.js @@ -1,4 +1,7 @@ Component({ + properties: { + scrollTop: { type: Number, value: 0 }, + }, data: { backTopTheme: 'round', backTopText: '顶部', diff --git a/src/back-top/_example/base/index.wxml b/src/back-top/_example/base/index.wxml index d75a6679d..9d634eec3 100644 --- a/src/back-top/_example/base/index.wxml +++ b/src/back-top/_example/base/index.wxml @@ -1 +1,6 @@ - + diff --git a/src/back-top/_example/half-round/index.js b/src/back-top/_example/half-round/index.js index 8007e3848..e6a54b37e 100644 --- a/src/back-top/_example/half-round/index.js +++ b/src/back-top/_example/half-round/index.js @@ -1,4 +1,7 @@ Component({ + properties: { + scrollTop: { type: Number, value: 0 }, + }, data: { backTopTheme: 'half-round-dark', backTopText: '返回顶部', diff --git a/src/back-top/_example/half-round/index.wxml b/src/back-top/_example/half-round/index.wxml index d75a6679d..9d634eec3 100644 --- a/src/back-top/_example/half-round/index.wxml +++ b/src/back-top/_example/half-round/index.wxml @@ -1 +1,6 @@ - + diff --git a/src/back-top/back-top.ts b/src/back-top/back-top.ts index 03b3f329a..b3bd06cf7 100644 --- a/src/back-top/back-top.ts +++ b/src/back-top/back-top.ts @@ -26,12 +26,18 @@ export default class BackTop extends SuperComponent { prefix, classPrefix: name, _icon: null, + hidden: true, }; observers = { icon() { this.setIcon(); }, + + scrollTop(value: number) { + const { visibilityHeight } = this.properties; + this.setData({ hidden: value < visibilityHeight }); + }, }; lifetimes = { @@ -52,6 +58,7 @@ export default class BackTop extends SuperComponent { this.triggerEvent('to-top'); if (this.$parent) { this.$parent?.setScrollTop(0); + this.setData({ hidden: true }); } else { wx.pageScrollTo({ scrollTop: 0, diff --git a/src/back-top/back-top.wxml b/src/back-top/back-top.wxml index 1d02278b1..3d119aae3 100644 --- a/src/back-top/back-top.wxml +++ b/src/back-top/back-top.wxml @@ -6,6 +6,7 @@ class="class {{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}" bindtap="toTop" aria-role="button" + hidden="{{hidden}}" > diff --git a/src/back-top/props.ts b/src/back-top/props.ts index 3a1eba434..43127ddac 100644 --- a/src/back-top/props.ts +++ b/src/back-top/props.ts @@ -10,6 +10,16 @@ const props: TdBackTopProps = { externalClasses: { type: Array, }, + /** 滚动高度达到此参数值才出现 */ + visibilityHeight: { + type: Number, + value: 200, + }, + /** 页面滚动距离 */ + scrollTop: { + type: Number, + value: 0, + }, /** 是否绝对定位固定到屏幕右下方 */ fixed: { type: Boolean, diff --git a/src/back-top/type.ts b/src/back-top/type.ts index 066a386bc..e4d2601bb 100644 --- a/src/back-top/type.ts +++ b/src/back-top/type.ts @@ -20,6 +20,20 @@ export interface TdBackTopProps { type: ArrayConstructor; value?: ['t-class', 't-class-icon', 't-class-text']; }; + /** + * 滚动高度达到此参数值才出现 + */ + visibilityHeight?: { + type: NumberConstructor; + value?: 200; + }; + /** + * 页面滚动距离 + */ + scrollTop?: { + type: NumberConstructor; + value: 0; + }; /** * 是否绝对定位固定到屏幕右下方 * @default true diff --git a/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap b/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap index 19847702b..c5e984d45 100644 --- a/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap +++ b/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap @@ -16,7 +16,7 @@ exports[`PullDownRefresh PullDownRefresh base demo works fine 1`] = ` "刷新完成", ] }}" - value="{{false}}" + value="{{true}}" bind:refresh="onRefresh" bind:scroll="onScroll" > @@ -204,6 +204,11 @@ exports[`PullDownRefresh PullDownRefresh base demo works fine 1`] = ` 拖拽该区域演示 顶部下拉刷新 + diff --git a/src/pull-down-refresh/_example/base/index.js b/src/pull-down-refresh/_example/base/index.js index f902882ad..04fac4254 100644 --- a/src/pull-down-refresh/_example/base/index.js +++ b/src/pull-down-refresh/_example/base/index.js @@ -6,12 +6,13 @@ Component({ }, rowCol1: [{ width: '100%', height: '342rpx', borderRadius: '24rpx' }], rowCol2: [[{ width: '327rpx' }], [{ width: '200rpx' }], [{ size: '327rpx', borderRadius: '24rpx' }]], - backTopVisible: false, + scrollTop: 0, }, ready() { + this.setData({ enable: true }); setTimeout(() => { - this.setData({ enable: true }); + this.setData({ enable: false }); }, 1000); }, @@ -24,10 +25,7 @@ Component({ }, onScroll(e) { const { scrollTop } = e.detail; - - this.setData({ - backTopVisible: scrollTop > 100, - }); + this.setData({ scrollTop }); }, }, }); diff --git a/src/pull-down-refresh/_example/base/index.wxml b/src/pull-down-refresh/_example/base/index.wxml index 8f0f38f2e..bcf75bb6e 100644 --- a/src/pull-down-refresh/_example/base/index.wxml +++ b/src/pull-down-refresh/_example/base/index.wxml @@ -25,6 +25,6 @@ 拖拽该区域演示 顶部下拉刷新 - +