fix(PullToRefresh): 修复PullToRefresh组件disabled属性在taro中无效的问题 (#2538)

Author: liangerwen

src/packages/pulltorefresh/demo.taro.tsx

@@ -5,23 +5,27 @@ import { useTranslate } from '@/sites/assets/locale/taro'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
 
 const PullToRefreshDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
       scrollView: 'ScrollView',
       primary: '反白模式',
+      disabled: '禁用',
     },
     'zh-TW': {
       basic: '基礎用法',
       scrollView: 'ScrollView',
       primary: '反白模式',
+      disabled: '禁用',
     },
     'en-US': {
       basic: 'Basic Usage',
       scrollView: 'ScrollView',
       primary: 'reverse',
+      disabled: 'disabled',
     },
   })
   return (
@@ -36,6 +40,9 @@ const PullToRefreshDemo = () => {
 
         <h2>{translated.primary}</h2>
         <Demo3 />
+
+        <h2>{translated.disabled}</h2>
+        <Demo4 />
       </div>
     </>
   )

src/packages/pulltorefresh/demos/taro/demo4.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { ScrollView } from '@tarojs/components'
+import { PullToRefresh, Cell, Toast } from '@nutui/nutui-react-taro'
+
+const Demo4 = () => {
+  const [list] = useState([1, 2, 3, 4, 5, 6, 7])
+  const [show, SetShow] = useState(false)
+  const [toastMsg, SetToastMsg] = useState('')
+  const toastShow = (msg: any) => {
+    SetToastMsg(msg)
+    SetShow(true)
+  }
+  const [scrollTop, setScrollTop] = useState(0)
+  return (
+    <>
+      <ScrollView
+        style={{ height: '150px' }}
+        scrollY
+        onScrollEnd={(e) => {
+          // scrollTop > 0, PullToRefresh 不触发 touchmove 事件。
+          if (e.detail?.scrollTop) {
+            setScrollTop(e.detail?.scrollTop)
+          }
+        }}
+      >
+        <PullToRefresh
+          scrollTop={scrollTop}
+          onRefresh={() =>
+            new Promise((resolve) => {
+              toastShow('😊')
+              resolve('done')
+            })
+          }
+          disabled
+        >
+          {list.map((item) => (
+            <Cell key={item}>{item}</Cell>
+          ))}
+        </PullToRefresh>
+      </ScrollView>
+      <Toast
+        type="text"
+        visible={show}
+        content={toastMsg}
+        onClose={() => {
+          SetShow(false)
+        }}
+      />
+    </>
+  )
+}
+
+export default Demo4

src/packages/pulltorefresh/pulltorefresh.taro.tsx

@@ -95,10 +95,11 @@ export const PullToRefresh: FunctionComponent<Partial<PullToRefreshProps>> = (
     return ''
   }
   const handleTouchStart: any = (e: ITouchEvent) => {
+    if (props.disabled) return
     touch.start(e as any)
   }
   const handleTouchMove: any = (e: ITouchEvent) => {
-    if (props.scrollTop > 0) {
+    if (props.scrollTop > 0 || props.disabled) {
       return
     }
     if (status === 'refreshing' || status === 'complete') return
@@ -139,6 +140,7 @@ export const PullToRefresh: FunctionComponent<Partial<PullToRefreshProps>> = (
     setStatus('pulling')
   }
   const handleTouchEnd: any = () => {
+    if (props.disabled) return
     pullingRef.current = false
     if (status === 'canRelease') {
       doRefresh()