搜索页面样式调整

src/pages/my/my.module.scss

@@ -1,5 +1,7 @@
 page {
   background: #F2F8F6 !important;
+  width:750rpx;
+  overflow: hidden;
 }
 
 .content {

src/pages/preview/search/search/components/list.tsx

@@ -1,16 +1,17 @@
-import {FC, useCallback, useEffect, useRef, useState} from "react";
+import {FC, useCallback, useEffect, useState} from "react";
 import {ScrollView, View} from "@tarojs/components";
 import styles from './list.module.scss'
 import Taro from "@tarojs/taro";
 import Empty from "@/components/empty/empty";
-import Spinner from "@/components/spinner";
 import Img from "@/components/image/image";
 import { SearchApi } from "@/api/search";
+import { AtLoadMore } from 'taro-ui'
 
 type Props = {
   name:string
+  clear:boolean
 }
-const SearchList: FC<{name:string}> = ({name}:Props) => {
+const SearchList: FC<Props> = ({name,clear}) => {
   const globalData = Taro.getApp().globalData
   const [page, setPage] = useState(1)
   const [brands, setBrands] = useState<any[]>([])
@@ -18,8 +19,16 @@ const SearchList: FC<{name:string}> = ({name}:Props) => {
   const [text, setText] = useState('')
   const [loading, setLoading] = useState(true)
 
+  useEffect(()=>{
+    if(!clear){
+      setBrands([])
+      setLoading(true)
+    }
+  },[clear])
   useEffect(() => {
-    getData()
+    if(name){
+      getData()
+    }
   }, [page,name])
 
   const getData = useCallback(async () => {
@@ -32,12 +41,17 @@ const SearchList: FC<{name:string}> = ({name}:Props) => {
         } else {
           setText('上拉加载更多~')
         }
+        setBrands([
+          ...data.data
+        ])
+      }else{
+        setBrands([
+          ...brands,
+          ...data.data
+        ])
       }
       setTotal(data.total)
-      setBrands([
+
-        ...brands,
-        ...data.data
-      ])
     } catch (e) {
     }
     setLoading(false)
@@ -66,13 +80,12 @@ const SearchList: FC<{name:string}> = ({name}:Props) => {
   }
 
   function onScrollToLower(){
-    useCallback(() => {
       if (brands?.length < total) {
         setPage(page + 1)
+        getData().then()
       } else {
         setText('没有更多了~')
       }
-    }, [total, brands])
   }
 
   return (
@@ -80,12 +93,12 @@ const SearchList: FC<{name:string}> = ({name}:Props) => {
       className='scrollview'
       scrollY
       scrollWithAnimation
-      style={{height:`${globalData.windowHeight-60}px`}}
+      style={{height:`${globalData.windowHeight-60-30}px`,paddingBottom:`30px`}}
       onScrollToLower={onScrollToLower}
     >
-      <Spinner enable={loading} overlay/>
+      { loading && <AtLoadMore status={'loading'}/>}
       {
-        brands.length ?
+        brands.length >= 1 && !loading &&
           <>
             {brands.map((d) => <View onClick={() => jumpInfo(d.data.id,d.data.table)} className={styles.box} key={d.data.id}>
               <Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
@@ -95,9 +108,10 @@ const SearchList: FC<{name:string}> = ({name}:Props) => {
               </View>
             </View>)
             }
-            <View style={{width: '710rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3">{text}</View>
+            <View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3">{text}</View>
-          </> : <Empty name='空空如也'/>
+          </>
       }
+      { !loading && brands.length === 0 && <Empty name='空空如也'/>}
     </ScrollView>
   )
 }

src/pages/preview/search/search/index.tsx

@@ -1,5 +1,5 @@
 import {Input, View, Text, PageContainer} from "@tarojs/components";
-import {FC, useState} from "react";
+import {FC, useEffect, useState} from "react";
 import { AtIcon } from 'taro-ui'
 import styles from './index.module.scss'
 import Taro from "@tarojs/taro";
@@ -20,6 +20,10 @@ const Search:FC = () => {
     getRecentSearch()
   })
 
+  useEffect(()=>{
+    getRecentSearch()
+  },[!show])
+
   function inpFn(e){
     setValue(e.detail.value)
   }
@@ -55,7 +59,10 @@ const Search:FC = () => {
     <View className="flex flex-column">
         <View className={styles.searchBox}>
           <AtIcon value='search' size='20' color='#ccc'></AtIcon>
-          <Input className={styles.input} placeholder="输入关键字搜索课程" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} />
+          { show ?
+            <Text className={styles.input} >{value}</Text>:
+            <Input className={styles.input} placeholder="输入关键字搜索课程" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} />
+          }
         </View>
 
       {
@@ -98,7 +105,7 @@ const Search:FC = () => {
       }
 
       <PageContainer onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} >
-        <SearchList name={value}/>
+        <SearchList name={value} clear={show} />
       </PageContainer>
 
     </View>