疾病滑动切换

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,32 +93,42 @@ const Sort: FC = () => {
 
       {/*<Search onConfirm={onConfirm}/>*/}
 
-      <View className={styles.scrollView} style={{top: `${globalData.statusBarHeight + 59}px`}}>
+      <Swiper
-        <ScrollView scrollY className={styles.firstOrder} enhanced showScrollbar={false}>
+        onChange={swiperChange}
-          {
+        className={styles.scrollView}
-            data.find(d => d.id === firstId)?.resource_category?.map(d => <View
+        current={data.findIndex(d => d.id === firstId)}
-              id={`${prefix}-${d.id}`}
+        style={{top: `${globalData.statusBarHeight + 59}px`}}>
-              key={d.id}
+        {
-              onClick={() => setSecondId(d.id)}
+          data.map(d => <SwiperItem key={d.id} className='flex'>
-              className={secondId === d.id && styles.select}>
+            <ScrollView scrollY className={styles.firstOrder} enhanced showScrollbar={false}>
-              {d.name}
+              {
-            </View>)
+                d.resource_category?.map(d => <View
-          }
+                  id={`${prefix}-${d.id}`}
-        </ScrollView>
+                  key={d.id}
-
+                  onClick={() => setSecondId(d.id)}
-        <ScrollView
+                  className={secondId === d.id && styles.select}>
-          enhanced
+                  {d.name}
-          showScrollbar={false}
+                </View>)
-          scrollY
+              }
-          className={styles.tree}
+            </ScrollView>
-          scrollWithAnimation>
+
-          {
+            <ScrollView
-            list.length ?
+              enhanced
-              list.map(d => <View className={styles.list} onClick={() => jump(d.id)}>{d.name}</View>)
+              showScrollbar={false}
-              : <Empty name='暂无数据'/>
+              scrollY
-          }
+              className={styles.tree}
-        </ScrollView>
+              scrollWithAnimation>
-      </View>
+              {
+                list.length ?
+                  list.map(d => <View className={styles.list} onClick={() => jump(d.id)}>{d.name}</View>)
+                  : <Empty name='暂无数据'/>
+              }
+            </ScrollView>
+          </SwiperItem>)
+        }
+
+
+      </Swiper>
     </View>
   )
 }