@gm-mobile/mp 3.9.3-beta.25 → 3.9.3-beta.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/mp",
-  "version": "3.9.3-beta.25",
+  "version": "3.9.3-beta.29",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-mobile#readme",
@@ -21,9 +21,9 @@
     "url": "https://github.com/gmfe/gm-mobile/issues"
   },
   "dependencies": {
-    "@gm-mobile/c-react": "^3.9.3-beta.25",
-    "@gm-mobile/c-tool": "^3.9.3-beta.25",
-    "@gm-mobile/locales": "^3.9.3-beta.25"
+    "@gm-mobile/c-react": "^3.9.3-beta.29",
+    "@gm-mobile/c-tool": "^3.9.3-beta.29",
+    "@gm-mobile/locales": "^3.9.3-beta.29"
   },
   "peerDependencies": {
     "@tarojs/components": "3.0.18",
@@ -33,5 +33,5 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1"
   },
-  "gitHead": "4cce964e13b909c02194af1666bafc5f08ac4a93"
+  "gitHead": "216ad1a8f7127b895838785f208455768b382ba2"
 }

package/src/component/page/page.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef, FC, useState, ReactNode } from 'react'
-import { Flex, LayoutRoot, LayoutRootV1 } from '@gm-mobile/c-react'
+import { Flex, LayoutRoot, LayoutRootV1, Loading } from '@gm-mobile/c-react'
 import { ScrollView } from '@tarojs/components'
 import PageBase, { PageProps } from './base'
-import { debounce } from 'lodash'
+import { pxTransform } from '@tarojs/taro'
 
 interface PageMPProps extends PageProps {
   onRefresh?: () => Promise<any>
-  onLoadMore?: () => Promise<any>
+  /** 上滑加载更多事件。如果promise返回一个空数组，表示没有更多了 */
+  onLoadMore?: () => Promise<Array<any> | undefined>
 }
 
 const PageMP: FC<PageMPProps> = ({
@@ -19,9 +20,10 @@ const PageMP: FC<PageMPProps> = ({
     refreshing: false,
     loadingMore: false,
   })
+
+  // Page加载状态
   const refLoading = useRef<boolean | undefined>(false)
   useEffect(() => {
-    // 和之前的不一样
     if (props.loading !== refLoading.current) {
       if (props.loading) {
         wx.showNavigationBarLoading()
@@ -32,82 +34,76 @@ const PageMP: FC<PageMPProps> = ({
       refLoading.current = props.loading
     }
   }, [props.loading])
-  const methods = {
-    async refresh() {
-      setState((state) => {
-        return {
-          ...state,
-          refreshing: true,
-        }
-      })
-      try {
-        onRefresh && (await onRefresh())
-      } catch (err) {
-        console.error(err)
+
+  const refresh = async () => {
+    setState((state) => {
+      return {
+        ...state,
+        refreshing: true,
+      }
+    })
+    try {
+      onRefresh && (await onRefresh())
+    } catch (err) {
+      console.error(err)
+    }
+    setState((state) => {
+      return {
+        ...state,
+        refreshing: false,
+      }
+    })
+  }
+
+  const loadMore = async () => {
+    console.log('load more')
+    setState((state) => {
+      return {
+        ...state,
+        loadingMore: true,
+      }
+    })
+    try {
+      onLoadMore && (await onLoadMore())
+    } catch (err) {
+      console.error(err)
+    }
+    setState((state) => {
+      return {
+        ...state,
+        loadingMore: false,
       }
-      setState((state) => {
-        return {
-          ...state,
-          refreshing: false,
-        }
-      })
-    },
-    loadMore: debounce(
-      async () => {
-        setState((state) => {
-          return {
-            ...state,
-            refreshing: true,
-          }
-        })
-        try {
-          onLoadMore && (await onLoadMore())
-        } catch (err) {
-          console.error(err)
-        }
-        setState((state) => {
-          return {
-            ...state,
-            refreshing: false,
-          }
-        })
-      },
-      1000,
-      { leading: true }
-    ),
+    })
   }
+  const withScrollView = !!onRefresh || !!onLoadMore
 
   return (
     <>
       <PageBase {...props}>
-        {onRefresh && (
+        {withScrollView && (
           <ScrollView
             className='m-flex'
             style={{ height: '100%' }}
             enableBackToTop
             scrollY
-            refresherEnabled
+            refresherEnabled={!!onRefresh}
             scrollWithAnimation
             scrollAnchoring
             refresherBackground='transparent'
             refresherTriggered={state.refreshing}
             lowerThreshold={50}
-            onRefresherRefresh={() => methods.refresh()}
-            onScrollToLower={() => methods.loadMore()}
+            onRefresherRefresh={onRefresh ? () => refresh() : undefined}
+            onScrollToLower={onLoadMore ? () => loadMore() : undefined}
           >
             {children}
             {state.loadingMore && (
-              <Flex
-                className='loading-more m-margin-tb-20 m-text-placeholder'
-                alignCenter
-                justifyCenter
-              >
-                加载中...
+              <Flex height={pxTransform(60)} alignCenter justifyCenter>
+                <Loading style={{ opacity: 0.5 }} />
               </Flex>
             )}
           </ScrollView>
         )}
-        {!onRefresh && children}
+        {!withScrollView && children}
       </PageBase>
       <LayoutRoot />
       <LayoutRootV1 />

package/src/router/index.ts

@@ -124,6 +124,8 @@ export default class Router {
         // @ts-ignore
         data && delete parsed.data
         this._data[to] = data
+      } else {
+        this._data[to] = undefined
       }
       this._beforeChange(option, () => Taro.navigateTo(parsed))
     })