feats

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "./dist",
   "projectname": "miniapp",
   "description": "十公里",
-  "appid": "wx06a7372d48d56843",
+  "appid": "wx835627a9b9b3932a",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/components/List/index.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState, useImperativeHandle, useMemo } from 'react';
-import SpinBox from "@/components/Spin/SpinBox";
-
+import Spin3 from '@/components/Spin/Spin3';
 import { ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 
@@ -94,24 +93,24 @@ export default React.forwardRef((props, ref) => {
   }))
 
   return (
-    <SpinBox loading={loading}>
-      <ScrollView
-        scrollY
-        enhanced
-        onScrollToLower={handleScrollToLower}
-        {...leftProps}
-        className={`${className} ${uqCls} list-view`}
-      >
-        {!render
-          ? props.children
-          : list.map((item, index) => render({ item, index }))
-        }
-        {!list || !list.length && noData}
-
-        {list && list.length > 0 && !hasMore &&
-          <view className='botton'>这是我的底线</view>
-        }
-      </ScrollView>
-    </SpinBox>
+    <ScrollView
+      scrollY
+      enhanced
+      onScrollToLower={handleScrollToLower}
+      {...leftProps}
+      className={`${className} ${uqCls} list-view`}
+    >
+      {!render
+        ? props.children
+        : list.map((item, index) => render({ item, index }))
+      }
+      {!list || !list.length && noData}
+
+      <Spin3 show={loading} />
+
+      {list && list.length > 0 && !hasMore &&
+        <view className='botton'>这是我的底线</view>
+      }
+    </ScrollView>
   )
 })

src/components/Spin/Spin3.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import classNames from 'classnames'
+
+/**
+ * 参考 https://github.com/wechat-miniprogram/weui-miniprogram/blob/master/src/components/loading/loading.wxml
+ */
+export default (props) => {
+  const { className, show, animated, duration = 350, tips = '加载中' } = props
+
+  const cls = classNames('wx_loading_view', { 'wx_loading_view__animated': animated }, { 'wx_loading_view__hide': !show }, className)
+  const style = animated ? { transition: `height ${duration} ms ease` } : {}
+
+  return (
+    <view className={cls} style={style}>
+      <view class='weui-loadmore'>
+          <view class='weui-loading'></view>
+          <view class='weui-loadmore__tips'>{tips}</view>
+      </view>
+    </view>
+  )
+}

src/pages/index/tabs/Recommend.jsx

@@ -106,33 +106,23 @@ export default (props) => {
           </mp-tabs>
         </scroll-view>
       </view>
-      {/* <View style={{ flex:'auto' }}> */}
-      <List
-        ref={listRef}
-        style={listStyle}
-        request={getResourceList}
-        params={queryParams}
-        onDataChange={handleDataChange}
-      >
-        <view style={{ padding: '30rpx 15rpx' }}>
-          <MasonryLayout
-            itemKey='resourceNo'
-            listData={listData}
-            render={(item, callback) => <Card item={item} onImageLoad={callback} />}
-          />
-        </view>
-
-        {/* {
-            alllist.length == 0 ?
-              <NoData /> :
-              <view className='waterfall'>
-                {
-                  alllist.map((item) => <Card key={item.resourceNo} item={item} />)
-                }
-              </view>
-          } */}
-      </List>
-      {/* </View> */}
+      <view style={{ flex:'auto' }}>
+        <List
+          ref={listRef}
+          style={listStyle}
+          request={getResourceList}
+          params={queryParams}
+          onDataChange={handleDataChange}
+        >
+          <view style={{ padding: '30rpx 15rpx' }}>
+            <MasonryLayout
+              itemKey='resourceNo'
+              listData={listData}
+              render={(item, callback) => <Card item={item} onImageLoad={callback} />}
+            />
+          </view>
+        </List>
+      </view>
     </view>
   )
 }