搜索优化

src/pages/indexSub/searchList/index.jsx

@@ -1,6 +1,7 @@
 import { Component } from "react";
 import Taro from "@tarojs/taro";
 import { View } from "@tarojs/components";
+import { AtIcon } from "taro-ui";
 import "./index.less";
 import ProductList from "../../../components/index/ProductList";
 import { getSearchProductList } from "../../../service";
@@ -11,6 +12,7 @@ export default class Index extends Component {
     totalPages: 1,
     loading: false,
     keyword: "",
+    isHasData: true,
   };
   componentDidMount() {
     const { keyword }  = Taro.getCurrentInstance().router.params||"";
@@ -35,7 +37,11 @@ export default class Index extends Component {
         : [...prevState.productList, ...res.goods_list],
       totalPages: res.total_pages,
       loading: false,
-    }));
+    }),()=>{
+      this.setState({
+        isHasData: res.goods_list.length > 0,
+      });
+    });
   };
   // 页面上拉触底
   onReachBottom = () => {
@@ -51,10 +57,17 @@ export default class Index extends Component {
     return (
       <View className="index">
         {/* 搜索列表 */}
-        <ProductList
-          productList={this.state.productList}
-          loading={this.state.loading}
-        ></ProductList>
+        {this.state.isHasData ? (
+          <ProductList
+            productList={this.state.productList}
+            loading={this.state.loading}
+          ></ProductList>
+        ) : (
+          <View className="no-data">
+            <AtIcon value="search" size="30" color="#999"></AtIcon>
+            <View className="no-data-text">暂无数据</View>
+          </View>
+        )}
       </View>
     );
   }

src/pages/indexSub/searchList/index.less

@@ -3,4 +3,12 @@
     background-color: #f9f9f9;
     padding-top: 20px;
     box-sizing: border-box;
-}
+    .no-data{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        color: #999;
+    }
+}