feats

src/components/List/index.jsx

@@ -27,7 +27,7 @@ export default React.forwardRef((props, ref) => {
 
   // 滚动
   const handleScrollToLower = (e) => {
-    const loading = loadingRef.current
+    // const loading = loadingRef.current
 
     if (!loading && hasMore) {
       setPayload({
@@ -41,7 +41,7 @@ export default React.forwardRef((props, ref) => {
     if (!request) return;
 
     setLoading(true)
-    loadingRef.current = true
+    // loadingRef.current = true
     request(params).then((res) => {
       const { records, ...pageInfo } = res || {}
       const lst = pageInfo.current === 1 ? records || [] : list.concat(records || [])
@@ -51,12 +51,12 @@ export default React.forwardRef((props, ref) => {
       }
 
       pageRef.current = pageInfo
-      loadingRef.current = false
+      // loadingRef.current = false
 
       setLoading(false)
 
     }).catch((err) => {
-      loadingRef.current = false
+      // loadingRef.current = false
       console.error(err)
       setLoading(false)
 

src/components/Spin/SpinBox.jsx

@@ -4,6 +4,19 @@ import { View } from '@tarojs/components'
 import Spin from '.'
 import './style.less'
 
+const Loading = (props) => {
+  const { loading, size = '64rpx', ...leftProps } = props
+
+  const cls = ['loading-box', loading? 'active' : undefined].filter(Boolean).join(' ')
+
+  return (
+    <View className={cls}>
+      <Spin size={size} {...leftProps} />
+    </View>
+  )
+}
+
+
 export default (props) => {
   const { className, style, loading, size = '64rpx', ...leftProps } = props
 
@@ -11,14 +24,8 @@ export default (props) => {
 
   return (
     <View className={cls} style={style}>
-      {
-        loading && (
-          <View className='loading-box'>
-            <Spin size={size} {...leftProps} />
-          </View>
-        )
-      }
       {props.children}
+      <Loading loading={loading} size={size} {...leftProps} />
     </View>
   )
 }

src/components/Spin/style.less

@@ -140,22 +140,11 @@
 .loading-wrapper {
   height: 100%;
   position: relative;
+  overflow: hidden;
 
   .loading-box {
-    // position: absolute;
-    // z-index: 10;
-    // top: 0;
-    // left: 0;
-    // width: 100%;
-    // height: 100%;
-    // min-height: 72px;
-    // padding-top: 60%;
-    // padding-left: 50%;
-    // background: rgba(255, 255, 255, .95);
-    // box-sizing: border-box;
-
     position: absolute;
-    z-index: 10;
+    z-index: -10;
     top: 0;
     left: 0;
     width: 100%;
@@ -164,7 +153,12 @@
     padding-top: 35%;
     padding-left: 50%;
     background: rgba(255, 255, 255, 0.95);
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    opacity: 0;
+
+    &.active {
+      opacity: 1;
+      z-index: 10;
+    }
   }
 }