疾病滑动切换

src/pages/preview/illness/sort/sort.module.scss

@@ -1,11 +1,12 @@
 .scrollView {
+  height: auto !important;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
+  width: 100%;
   margin: auto;
-  display: flex;
 }
 
 .firstOrder {

src/pages/preview/illness/sort/sort.tsx

@@ -1,4 +1,4 @@
-import {Image, ScrollView, View} from "@tarojs/components";
+import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
 import {FC, useEffect, useMemo, useState} from "react";
 import {Category, HomeApi} from "@/api";
 import Taro from "@tarojs/taro";
@@ -11,8 +11,8 @@ import leftArrow from "@/static/img/leftArrow.png"
 const prefix = 'SORT'
 const Sort: FC = () => {
   const [data, setData] = useState<Category[]>([])
-  const [firstId, setFirstId] = useState<number | undefined>(undefined)
+  const [firstId, setFirstId] = useState<number | undefined>(undefined)  // 一级分类
-  const [secondId, setSecondId] = useState<number | undefined>(undefined)
+  const [secondId, setSecondId] = useState<number | undefined>(undefined) // 二级分类
   const [list, setList] = useState<any[]>([])
   const globalData = Taro.getApp().globalData
   const menu = Taro.getMenuButtonBoundingClientRect()
@@ -67,6 +67,13 @@ const Sort: FC = () => {
     }
   }, [secondId])
 
+  function swiperChange(e) {
+    const firstData = data[e.target.current]
+    if (!firstData) return;
+    setFirstId(firstData.id)
+    setSecondId(firstData?.resource_category?.[0]?.id)
+  }
+
   return (
     <View>
       <View style={headerStyles}>
@@ -78,6 +85,7 @@ const Sort: FC = () => {
           <View style={{width: '200px', margin: 'auto'}}>
             <Tabs
               tabList={getTabList}
+              current={firstId}
               onChange={(data) => firstIdChange(data.tab?.value as number)}/>
           </View>
         </View>
@@ -85,10 +93,16 @@ const Sort: FC = () => {
 
       {/*<Search onConfirm={onConfirm}/>*/}
 
-      <View className={styles.scrollView} style={{top: `${globalData.statusBarHeight + 59}px`}}>
+      <Swiper
+        onChange={swiperChange}
+        className={styles.scrollView}
+        current={data.findIndex(d => d.id === firstId)}
+        style={{top: `${globalData.statusBarHeight + 59}px`}}>
+        {
+          data.map(d => <SwiperItem key={d.id} className='flex'>
             <ScrollView scrollY className={styles.firstOrder} enhanced showScrollbar={false}>
               {
-            data.find(d => d.id === firstId)?.resource_category?.map(d => <View
+                d.resource_category?.map(d => <View
                   id={`${prefix}-${d.id}`}
                   key={d.id}
                   onClick={() => setSecondId(d.id)}
@@ -110,7 +124,11 @@ const Sort: FC = () => {
                   : <Empty name='暂无数据'/>
               }
             </ScrollView>
-      </View>
+          </SwiperItem>)
+        }
+
+
+      </Swiper>
     </View>
   )
 }