fix(PullDownRefresh): added usingCustomNavbar property to resolve conflicts when used with t-navbar (#3394)

Author: jarmywang

src/pull-down-refresh/README.en-US.md

@@ -21,6 +21,7 @@ refresh-timeout | Number | 3000 | \- | N
 scroll-into-view | String | - | `1.1.5` | N
 show-scrollbar | Boolean | true | \- | N
 upper-threshold | String / Number | 50 | `1.1.5` | N
+using-custom-navbar | Boolean | false | \- | N
 value | Boolean | false | \- | N
 default-value | Boolean | undefined | uncontrolled property | N
 
@@ -35,6 +36,7 @@ dragstart | `(scrollTop: number, scrollLeft: number)` | `1.2.10`
 refresh | \- | \-
 scrolltolower | \- | \-
 timeout | \- | \-
+
 ### PullDownRefresh External Classes
 
 className | Description

src/pull-down-refresh/README.md

@@ -54,6 +54,7 @@ refresh-timeout | Number | 3000 | 刷新超时时间 | N
 scroll-into-view | String | - | `1.1.5`。值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | N
 show-scrollbar | Boolean | true | 滚动条显隐控制 (同时开启 enhanced 属性后生效) | N
 upper-threshold | String / Number | 50 | `1.1.5`。距顶部/左边多远时，触发 scrolltoupper 事件 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
 value | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 | N
 default-value | Boolean | undefined | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态。非受控属性 | N
 
@@ -68,6 +69,7 @@ dragstart | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动开始
 refresh | \- | 结束下拉时触发
 scrolltolower | \- | 滚动到页面底部时触发
 timeout | \- | 刷新超时触发
+
 ### PullDownRefresh External Classes
 
 类名 | 描述

src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap

@@ -11,6 +11,7 @@ exports[`PullDownRefresh PullDownRefresh base demo works fine 1`] = `
         "刷新完成",
       ]
     }}"
+    usingCustomNavbar="{{true}}"
     value="{{true}}"
     bind:refresh="onRefresh"
     bind:scroll="onScroll"

src/pull-down-refresh/_example/base/index.wxml

@@ -1,6 +1,7 @@
 <t-pull-down-refresh
   value="{{enable}}"
   loadingTexts="{{['下拉刷新', '松手刷新', '正在刷新', '刷新完成']}}"
+  usingCustomNavbar
   bind:refresh="onRefresh"
   bind:scroll="onScroll"
 >

src/pull-down-refresh/props.ts

@@ -69,6 +69,11 @@ const props: TdPullDownRefreshProps = {
     type: null,
     value: 50,
   },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: {
+    type: Boolean,
+    value: false,
+  },
   /** 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 */
   value: {
     type: Boolean,

src/pull-down-refresh/pull-down-refresh.less

@@ -4,7 +4,6 @@
 
 .@{prefix}-pull-down-refresh {
   overflow: hidden;
-  max-height: 100vh;
   height: 100%;
 
   &__track {

src/pull-down-refresh/pull-down-refresh.ts

@@ -2,6 +2,7 @@ import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/ind
 import config from '../common/config';
 import props from './props';
 import { unitConvert, systemInfo } from '../common/utils';
+import useCustomNavbar from '../mixins/using-custom-navbar';
 
 const { prefix } = config;
 const name = `${prefix}-pull-down-refresh`;
@@ -38,6 +39,8 @@ export default class PullDownRefresh extends SuperComponent {
 
   properties = props;
 
+  behaviors = [useCustomNavbar];
+
   data = {
     prefix,
     classPrefix: name,

src/pull-down-refresh/pull-down-refresh.wxml

@@ -1,7 +1,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <scroll-view
-  style="{{_._style([style, customStyle])}}"
+  style="{{_._style([style, customStyle, 'max-height: calc(100vh - ' + distanceTop + 'px)'])}}"
   class="{{classPrefix}} class {{prefix}}-class"
   type="list"
   scroll-top="{{scrollTop}}"

src/pull-down-refresh/type.ts

@@ -109,6 +109,14 @@ export interface TdPullDownRefreshProps {
     type: null;
     value?: string | number;
   };
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态
    * @default false