feat(back-top): enable property scroll-top and visibility-height (#2177)

* feat(back-top): enable property scroll-top and visibility-height * test: update snapshots
Tencent · Nov 1, 2023 · 93953a5 · 93953a5
1 parent 036a386
commit 93953a5
Show file tree

Hide file tree

Showing 16 changed files with 73 additions and 14 deletions.
diff --git 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
@@ -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
@@ -3,6 +3,7 @@
 exports[`BackTop BackTop base demo works fine 1`] = `
 <base>
   <t-back-top
+    scrollTop="{{0}}"
     text="顶部"
     theme="round"
     bind:to-top="onToTop"
@@ -13,6 +14,7 @@ exports[`BackTop BackTop base demo works fine 1`] = `
 exports[`BackTop BackTop half-round demo works fine 1`] = `
 <half-round>
   <t-back-top
+    scrollTop="{{0}}"
     text="返回顶部"
     theme="half-round-dark"
     bind:to-top="onToTop"

diff --git a/src/back-top/_example/back-top.ts b/src/back-top/_example/back-top.ts
@@ -1,12 +1,13 @@
 Page({
   data: {
     type: 'round',
-    showBackTop: false,
+    scrollTop: 0,
     rowCol: [{ size: '327rpx', borderRadius: '24rpx' }, 1, { width: '61%' }],
   },
 
   onPageScroll(e) {
-    this.setData({ showBackTop: e.scrollTop > 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
@@ -25,6 +25,6 @@
     </view>
   </t-demo>
 
-  <base wx:if="{{type == 'round' && showBackTop}}" />
-  <half-round wx:if="{{type == 'half-round' && showBackTop}}" />
+  <base wx:if="{{type == 'round'}}" scroll-top="{{scrollTop}}" />
+  <half-round wx:if="{{type == 'half-round'}}" scroll-top="{{scrollTop}}" />
 </view>
diff --git 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
@@ -1 +1,6 @@
-<t-back-top theme="{{backTopTheme}}" text="{{backTopText}}" bind:to-top="onToTop"></t-back-top>
+<t-back-top
+  theme="{{backTopTheme}}"
+  text="{{backTopText}}"
+  scroll-top="{{scrollTop}}"
+  bind:to-top="onToTop"
+></t-back-top>
diff --git 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
@@ -1 +1,6 @@
-<t-back-top theme="{{backTopTheme}}" text="{{backTopText}}" bind:to-top="onToTop"></t-back-top>
+<t-back-top
+  theme="{{backTopTheme}}"
+  text="{{backTopText}}"
+  scroll-top="{{scrollTop}}"
+  bind:to-top="onToTop"
+></t-back-top>
diff --git 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
@@ -6,6 +6,7 @@
   class="class {{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}"
   bindtap="toTop"
   aria-role="button"
+  hidden="{{hidden}}"
 >
   <view class="{{classPrefix}}__icon" aria-hidden>
     <slot name="icon" />

diff --git 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
@@ -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
@@ -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`] = `
           拖拽该区域演示 顶部下拉刷新
         </wx-view>
       </wx-view>
+      <t-back-top
+        scrollTop="{{0}}"
+        text="顶部"
+        visibilityHeight="{{100}}"
+      />
     </wx-view>
   </t-pull-down-refresh>
 </base>

diff --git 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
@@ -25,6 +25,6 @@
       </view>
       <view class="text">拖拽该区域演示 顶部下拉刷新</view>
     </view>
-    <t-back-top wx:if="{{backTopVisible}}" text="顶部" />
+    <t-back-top text="顶部" scroll-top="{{scrollTop}}" visibility-height="{{100}}" />
   </view>
 </t-pull-down-refresh>