专业知识滑动列表 && 下拉加载

src/pages/preview/profession/profession.config.ts

@@ -1,4 +1,3 @@
 export default definePageConfig({
   navigationBarTitleText: '专业知识',
-  onReachBottomDistance: 30
 })

src/pages/preview/profession/profession.module.scss

@@ -0,0 +1,20 @@
+.height {
+  height: calc(100vh - 80rpx - env(safe-area-inset-bottom));
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.killBox {
+  background: #fff;
+  padding: 20rpx;
+  box-sizing: border-box;
+  display: flex;
+  margin-bottom: 20rpx;
+
+  Image,
+  image {
+    width: 200rpx;
+    margin-right: 20rpx;
+    border-radius: 10rpx;
+  }
+}

src/pages/preview/profession/profession.tsx

@@ -1,26 +1,60 @@
-import {Image, View} from "@tarojs/components";
+import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
 import {HomeApi} from "@/api";
 import {useEffect, useState} from "react";
 import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
 import Empty from "@/components/empty/empty";
 import Taro from "@tarojs/taro";
+import styles from './profession.module.scss'
+
+interface KillData {
+  data: Kill[]
+  total: number
+  page: number
+}
 
 const Profession = () => {
   const [tabs, setTabs] = useState<TabList[]>([])
-  const [page, setPage] = useState(1)
   const [categoryId, setCategoryId] = useState<number | null>(null)
-  const [data, setData] = useState<Kill[]>([])
-  const [total, setTotal] = useState(0)
+  const [data, setData] = useState<Map<number, KillData>>(new Map)
+
+  /**
+   * more 开启加载更多
+   */
+  async function getData(more = false) {
+    if (categoryId) {
+      const oldData = new Map<number, KillData>(data)
+      const categoryData = oldData.get(categoryId)
+      const page = more ? (categoryData?.page || 0) + 1 : categoryData?.page || 1
 
-  async function getData(categoryId: number) {
-    const res = await HomeApi.skillList(categoryId, page, 10)
-    setTotal(res.total)
-    setData(res.data)
+      /** 无更多 */
+      if (more && categoryData && categoryData.data.length >= categoryData.total) {
+        return
+      }
+
+      const res = await HomeApi.skillList(categoryId!, page, 10)
+      const dataList = res.data.reduce((pre, cur) => {
+        const index = pre.findIndex(d => d.id === cur.id)
+        if (index === -1) {
+          pre.push(cur)
+        } else {
+          pre.splice(index, 1, cur)
+        }
+        return pre
+      }, categoryData?.data || [])
+      oldData.delete(categoryId)
+
+      oldData.set(categoryId, {
+        data: dataList,
+        total: res.total,
+        page: page
+      })
+      setData(oldData)
+    }
   }
 
   useEffect(() => {
-    categoryId && getData(categoryId)
-  }, [categoryId, page])
+    categoryId && getData()
+  }, [categoryId])
 
   async function getCategory() {
     const res = await HomeApi.skillCategory()
@@ -30,7 +64,6 @@ const Profession = () => {
   }
 
   function tabsChange(tab: OnChangOpt) {
-    setPage(1)
     setCategoryId(tab.tab?.value as number)
   }
 
@@ -38,24 +71,52 @@ const Profession = () => {
     Taro.navigateTo({url: '/pages/preview/videoFull/videoFull?url=' + url})
   }
 
-  useEffect(() => {
-    getCategory().then()
-  }, [])
+  function swiperChange(e) {
+    const categoryId = tabs[e.target.current].value
+    setCategoryId(Number(categoryId))
+  }
+
+  Taro.useLoad(getCategory)
+
+  function KillList(data: KillData): JSX.Element {
+    if (!data?.data?.length) {
+      return <Empty name='暂无数据'/>
+    }
+    return (
+      <ScrollView
+        scrollY
+        onScrollToLower={() => getData(true)}
+        className={styles.height}>
+        {
+          data.data.map(d =>
+            <View className={styles.killBox} onClick={() => jump(d.resource.url)} >
+              <Image src={d.url_path} mode='widthFix'/>
+              <View className='text-ellipsis flex-1'>{d.resource.name}</View>
+            </View>
+          )
+        }
+      </ScrollView>
+    )
+  }
+
 
   return (
     <>
       <View className='bg-white'>
-        <Tabs tabList={tabs} onChange={tabsChange}/>
+        <Tabs tabList={tabs} onChange={tabsChange} current={categoryId!}/>
       </View>
 
+      <Swiper
+        current={tabs.findIndex(d=>d.value === categoryId)}
+        onChange={swiperChange}
+        className={styles.height}
+        style={{paddingTop: '10px'}}>
         {
-        data.length > 0
-          ? data.map(d => <View className='flex bg-white mt-2' onClick={() => jump(d.resource.url)}>
-            <Image src={d.url_path} style={{width: '200px', height: '100px', marginRight: '10px'}}/>
-            <View className='text-ellipsis'>{d.resource.name}</View>
-          </View>)
-          : <Empty name='暂无数据'/>
+          tabs.map(d => <SwiperItem key={d.title}>
+            {KillList(data.get(Number(d.value))!)}
+          </SwiperItem>)
         }
+      </Swiper>
     </>
   )
 }