🎈 perf(购物页面): 添加分页功能]

src/pages/shopping/index.tsx

@@ -38,9 +38,13 @@ export const Shopping: FC = memo(() => {
   )
 })
 
-interface InternalContainer {}
+interface SearchOptions {
+  short_name_or_phone?: string
+  page?: number
+  size?: number
+}
 
-const ShoppingCartContainer: FC<InternalContainer> = () => {
+const ShoppingCartContainer: FC = () => {
   let isFirst = useRef(true)
 
   const { isMultipleSelection, isManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore } = useShoppingState()
@@ -59,25 +63,31 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
 
   const { fetchData, state } = ShoppingCartListApi()
 
-  const [searchOptions, setSearchOptions] = useState({
-    short_name_or_phone: '',
+  const [searchOptions, setSearchOptions] = useState<SearchOptions>({
+    
+    page: 1,
+    size: 10,
   })
+
   useDidShow(() => {
+    // 第二次进入该页面时触发
     if (!isFirst.current) {
-      fetchData(searchOptions)
+      fetchData(getFilterData(searchOptions))
     }
   })
 
   useEffect(() => {
-    console.log('useEffect fetchData')
-    if (!isEmptyObject(getFilterData(searchOptions))) {
-      fetchData(searchOptions)
+    console.log('useEffect fetchData', getFilterData(searchOptions))
+    if (!isFirst.current) {
+      fetchData(getFilterData(searchOptions))
     }
   }, [searchOptions])
 
   // 输入了搜索关键字
   const getSearchData = useCallback(e => {
-    setSearchOptions(prev => ({ ...prev, short_name_or_phone: e }))
+    console.log('getSearchData===>',e);
+    pageNum.current.page = 1
+    setSearchOptions(prev => ({ ...prev, short_name_or_phone: e, size: 10 }))
   }, [])
 
   const [shoppingCartData, setShoppingCartData] = useState<{
@@ -85,6 +95,18 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     total: number
   }>({ list: [], total: 0 })
 
+  //上拉加载数据
+  const pageNum = useRef({ size: searchOptions.size, page: searchOptions.page })
+  // 上拉加载
+  const getScrollToLower = useCallback(() => {
+    if (shoppingCartData.list.length < shoppingCartData.total) {
+      pageNum.current.page!++
+      const size = pageNum.current.size! * pageNum.current.page!
+      setSearchOptions((e) => ({ ...e, size }))
+      console.log(searchOptions, 11111)
+    }
+  }, [shoppingCartData])
+
   //数据加载状态
   const statusMore = useMemo(() => {
     console.log('shoppingCartData==>', shoppingCartData, state)
@@ -101,7 +123,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
   useLayoutEffect(() => {
     ;(async () => {
       console.log('useLayoutEffect')
-      await fetchData()
+      await fetchData(getFilterData(searchOptions))
       isFirst.current = false
       let query = Taro.createSelectorQuery()
       console.log('query', query)
@@ -203,8 +225,9 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
 
   // 下拉刷新
   const handleRefresh = async () => {
+    pageNum.current.page = 1
     setRefreshStatus(true)
-    const res = await fetchData(searchOptions)
+    const res = await fetchData(getFilterData(searchOptions))
     if (res.success) {
       setRefreshStatus(false)
       alert.success('刷新成功')
@@ -230,15 +253,12 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
       </View>
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
         <View id='shoppingListContainer' className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
-          <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
-            {// isPending ? (
-            //   null
-            // ) : (
+          <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus} selfonScrollToLower={getScrollToLower}>
+            {
             !!shoppingCartData?.list?.length &&
               shoppingCartData?.list?.map((item, index) => {
                 return <ItemList itemData={item} key={index}></ItemList>
               })
-            // )
             }
           </InfiniteScroll>
         </View>