flx

src/components/List/index.jsx

 import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
+import SpinBox from "@/components/Spin/SpinBox";
+
 import { ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 
     className,
     ...leftProps
   } = props
+  const [loading, setLoading] = useState(false)
 
   const contextRef = useRef()
   const loadingRef = useRef(false)
   const fetchList = (params) => {
     if (!request) return;
 
-    Taro.showLoading()
+    setLoading(true)
     loadingRef.current = true
     request(params).then((res) => {
       const { records, ...pageInfo } = res || {}
 
       pageRef.current = pageInfo
       loadingRef.current = false
-      Taro.hideLoading()
+
+      setLoading(false)
+
     }).catch((err) => {
       loadingRef.current = false
       console.error(err)
-      Taro.hideLoading()
+      setLoading(false)
+
       if (onError) {
         onError(err)
       }
   }))
 
   return (
+
     <ScrollView
       scrollY
       enhanced
       {...leftProps}
       className={`${className} list-view`}
     >
-      {!render
-        ? props.children
-        : list.map((item, index) => render({ item, index }))
-      }
-      {!list || !list.length && noData}
+      <SpinBox loading={loading} className='index-container' >
+
+        {!render
+          ? props.children
+          : list.map((item, index) => render({ item, index }))
+        }
+        {!list || !list.length && noData}
+
+        {list && list.length > 0 && !hasMore &&
+
+          <view className='botton'>这是我的底线</view>
 
-      {list && list.length > 0 && !hasMore && <view className='botton'>这是我的底线</view>}
+        }
+      </SpinBox>
 
     </ScrollView>
   )

src/pages/index/tabs/Guide.jsx

 import Taro, { useDidShow } from '@tarojs/taro'
 import MoreGuide from "@/components/MoreGuide";
 import BossCard from '@/components/BossCard'
+import SpinBox from "@/components/Spin/SpinBox";
+
 import GPS from '@/assets/icons/GuideCheck/GPS.png'
 import copy_logo from '@/assets/icons/GuideCheck/copy_logo.png'
 import Cup from '@/assets/icons/GuideCheck/Cup.png'
   const [extend, setExtend] = useState([])
   const [ifroomId, setIfroomId] = useState('havenot')
   const [spackage, setPackage] = useState([])
+  const [loading, setLoading] = useState(false)
 
   const { roomId: rid } = useModel('hotel')
 
     goContent()
     if (roomId) {
       // 点击’去这里‘跳转导航
+      setLoading(true)
       getTaRoom(roomId).then((res) => {
         Roomlog.current = (res.location).toString().split(',')[0]
         Roomlat.current = (res.location).toString().split(',')[1]
         Parklog.current = (res.parkingLocation).toString().split(',')[0]
         Parklat.current = (res.parkingLocation).toString().split(',')[1]
         setTaRoomContent(res || [])
+        setLoading(false)
+
       })
       //更多指引
+      setLoading(true)
+
       getExtendContent('room', roomId).then((res) => {
         setExtend(res.records || [])
         setIfroomId('reality')
         setAllextNum(res.total)
         setNewextNum(res.records.length)
+        setLoading(false)
+
       })
+      setLoading(true)
+
       getRecommendList({ location: location }).then((res) => {
         setPackage(res || [])
+        setLoading(false)
+
       })
+
     } else {
+      setLoading(true)
+
       getRecommendList({ location: location }).then((res) => {
         setPackage(res || [])
+        setLoading(false)
+
       })
       return
     }
   useEffect(() => {
 
     if (roomId) {
+      setLoading(true)
       // 点击’去这里‘跳转导航
       getTaRoom(roomId).then((res) => {
         Roomlog.current = (res.location).toString().split(',')[0]
         Parklog.current = (res.parkingLocation).toString().split(',')[0]
         Parklat.current = (res.parkingLocation).toString().split(',')[1]
         setTaRoomContent(res || [])
+        setLoading(false)
       })
       //更多指引
+      setLoading(true)
+
       getExtendContent('room', roomId).then((res) => {
         setExtend(res.records || [])
         setIfroomId('reality')
         setAllextNum(res.total)
         setNewextNum(res.records.length)
+        setLoading(false)
+
       })
+      setLoading(true)
+
       getRecommendList({ location: location }).then((res) => {
         setPackage(res || [])
+        setLoading(false)
+
       })
+      // setLoading(false)
+
     } else {
+      setLoading(true)
+
       getRecommendList({ location: location }).then((res) => {
         setPackage(res || [])
+        setLoading(false)
+
       })
       return
     }
 
   return (
     <scroll-view scrollY style='height:100%;'  >
-
-      <view className='Guide-Home-box'>
-        {
-          ifroomId === 'havenot' && (
-            <view className='Guide-image-text-box'>
-              <image className='Guide-images' src={sleep} />
-              <view className='Guide-text'>您还没有入住订单哟~</view>
-            </view>
-          )
-        }
-        {/* 有民宿的情况下 */}
-        {
-          ifroomId === 'reality' && (
-            <view>
-
-              <view className='room-box-info-ROOM'>
-                <view className='room-bi-name-ROOM' >
-                  <view className='room-bin-title-ROOM'>房屋名称</view>
-                  <view className='room-bint-nameInfo-ROOM'>{taRoomContent?.roomName}
+      <SpinBox loading={loading} className='index-container' >
+
+        <view className='Guide-Home-box'>
+          {
+            ifroomId === 'havenot' && (
+              <view className='Guide-image-text-box'>
+                <image className='Guide-images' src={sleep} />
+                <view className='Guide-text'>您还没有入住订单哟~</view>
+              </view>
+            )
+          }
+          {/* 有民宿的情况下 */}
+          {
+            ifroomId === 'reality' && (
+              <view>
+
+                <view className='room-box-info-ROOM'>
+                  <view className='room-bi-name-ROOM' >
+                    <view className='room-bin-title-ROOM'>房屋名称</view>
+                    <view className='room-bint-nameInfo-ROOM'>{taRoomContent?.roomName}
+                    </view>
                   </view>
                 </view>
-              </view>
-              {/* --------房屋位置-------- */}
-              {
-                !roomGps ? <view></view>
-                  :
-                  <view className='room-box-info-HouLocation'>
-                    <view className='room-bi-name-HouLocation' >
-                      <view className='room-bin-title-HouLocation'>房屋位置</view>
-                      <view className='room-bint-nameInfo-HouLocation'>
-                        <view className='room-bint-nameInfo-bool-HouLocation' >{taRoomContent?.address}</view>
-                        <view className='room-bintn-button-HouLocation' onClick={() => { goRoomMap() }} style={{ display: wifiButtonStyle }}>
-                          <image className='room-bintn-image-HouLocation' src={GPS} />
-                          <text className='room-bintn-text-HouLocation'>去这里</text>
+                {/* --------房屋位置-------- */}
+                {
+                  !roomGps ? <view></view>
+                    :
+                    <view className='room-box-info-HouLocation'>
+                      <view className='room-bi-name-HouLocation' >
+                        <view className='room-bin-title-HouLocation'>房屋位置</view>
+                        <view className='room-bint-nameInfo-HouLocation'>
+                          <view className='room-bint-nameInfo-bool-HouLocation' >{taRoomContent?.address}</view>
+                          <view className='room-bintn-button-HouLocation' onClick={() => { goRoomMap() }} style={{ display: wifiButtonStyle }}>
+                            <image className='room-bintn-image-HouLocation' src={GPS} />
+                            <text className='room-bintn-text-HouLocation'>去这里</text>
+                          </view>
                         </view>
                       </view>
                     </view>
-                  </view>
 
-              }
-
-
-              {/* --------停车场-------- */}
-              {
-                !parkingGps ? <view></view>
-                  :
-                  <view className='room-box-info-Parking'>
-                    <view className='room-bi-name-Parking' >
-                      <view className='room-bin-title-Parking'>停车位置</view>
-                      <view className='room-bint-nameInfo-Parking'>
-                        <view className='room-bint-nameInfo-bool-Parking' >{taRoomContent?.parkingAddress}</view>
-                        <view className='room-bintn-button-Parking' onClick={() => { goParkMap() }} style={{ display: wifiButtonStyle }}>
-                          <image className='room-bintn-image-Parking' src={GPS} />
-                          <text className='room-bintn-text-Parking'>去这里</text>
+                }
+
+
+                {/* --------停车场-------- */}
+                {
+                  !parkingGps ? <view></view>
+                    :
+                    <view className='room-box-info-Parking'>
+                      <view className='room-bi-name-Parking' >
+                        <view className='room-bin-title-Parking'>停车位置</view>
+                        <view className='room-bint-nameInfo-Parking'>
+                          <view className='room-bint-nameInfo-bool-Parking' >{taRoomContent?.parkingAddress}</view>
+                          <view className='room-bintn-button-Parking' onClick={() => { goParkMap() }} style={{ display: wifiButtonStyle }}>
+                            <image className='room-bintn-image-Parking' src={GPS} />
+                            <text className='room-bintn-text-Parking'>去这里</text>
+                          </view>
                         </view>
                       </view>
                     </view>
-                  </view>
 
-              }
+                }
 
 
-              {/* --------无线网-------- */}
-              <view className='room-box-info-WIFIContent'>
-                <view className='room-bi-name-WIFIContent' >
-                  <view className='room-bin-title-WIFIContent'>WiFi信息</view>
-                  <view className='room-bint-nameInfo-WIFIContent'>
-                    <view className='room-bint-nameInfo-bool-WIFIContent-wifi' >名称：{taRoomContent?.wifiName}</view>
-                    <view className='room-bint-nameInfo-bool-WIFIContent-password' >密码：{taRoomContent?.wifiPassword}</view>
-                    <view className='room-bintn-button-WIFIContent' onClick={() => { wifiCopy() }} style={{ display: wifiButtonStyle }}>
-                      <image className='room-bintn-image-WIFIContent' src={copy_logo} />
-                      <text className='room-bintn-text-WIFIContent'>复制</text>
+                {/* --------无线网-------- */}
+                <view className='room-box-info-WIFIContent'>
+                  <view className='room-bi-name-WIFIContent' >
+                    <view className='room-bin-title-WIFIContent'>WiFi信息</view>
+                    <view className='room-bint-nameInfo-WIFIContent'>
+                      <view className='room-bint-nameInfo-bool-WIFIContent-wifi' >名称：{taRoomContent?.wifiName}</view>
+                      <view className='room-bint-nameInfo-bool-WIFIContent-password' >密码：{taRoomContent?.wifiPassword}</view>
+                      <view className='room-bintn-button-WIFIContent' onClick={() => { wifiCopy() }} style={{ display: wifiButtonStyle }}>
+                        <image className='room-bintn-image-WIFIContent' src={copy_logo} />
+                        <text className='room-bintn-text-WIFIContent'>复制</text>
+                      </view>
                     </view>
                   </view>
                 </view>
-              </view>
 
-              <view className='Guide-Content-box'  >
-                <view className='title-image' style={{ display: guideStyle }} >
-                  <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
-                  <text className='title-title-boss' >更多指引</text>
-                </view>
-                {(extend || []).map((item, index) => <MoreGuide key={(index)} item={item} />)}
-                {/* 
+                <view className='Guide-Content-box'  >
+                  <view className='title-image' style={{ display: guideStyle }} >
+                    <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
+                    <text className='title-title-boss' >更多指引</text>
+                  </view>
+                  {(extend || []).map((item, index) => <MoreGuide key={(index)} item={item} />)}
+                  {/* 
                 <view className='showMore' style={{ display: newextNum == AllextNum ? 'none' : '' }} onClick={extendMore}>
                   <view>点击查看更多</view>
                   <image src={showMore} className='moreTip' />
                 </view> */}
+                </view>
               </view>
+            )
+          }
+          <view className='Guide-Content-box'>
+            <view className='title-image'>
+              <image mode='scaleToFill' className='title-image-cup' src={Cup} />
+              <text className='title-title-boss' >老板推荐好吃的</text>
             </view>
-          )
-        }
-        <view className='Guide-Content-box'>
-          <view className='title-image'>
-            <image mode='scaleToFill' className='title-image-cup' src={Cup} />
-            <text className='title-title-boss' >老板推荐好吃的</text>
           </view>
-        </view>
-        <view style={{ marginTop: '10rpx', marginBottom: '60rpx' }}>
-          {(spackage || []).map((item, index) => <BossCard det={item} st={parseFloat(item.score.toFixed(1))} key={(index)} trackClick={trackClick} taRoomContent={taRoomContent} item={item} />)}
-        </view>
+          <view style={{ marginTop: '10rpx', marginBottom: '60rpx' }}>
+            {(spackage || []).map((item, index) => <BossCard det={item} st={parseFloat(item.score.toFixed(1))} key={(index)} trackClick={trackClick} taRoomContent={taRoomContent} item={item} />)}
+          </view>
 
-      </view>
+        </view>
+      </SpinBox>
     </scroll-view>
   )
 }