52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
|
"use client";
|
||
|
|
|
||
|
|
import React,{useRef,useState} from 'react'
|
||
|
|
import { Tabs, Swiper } from 'antd-mobile'
|
||
|
|
import { AppstoreOutline,SearchOutline } from 'antd-mobile-icons'
|
||
|
|
const tabItems = [
|
||
|
|
{ key: 'commend', title: '推荐' },
|
||
|
|
{ key: 'follow', title: '关注' },
|
||
|
|
]
|
||
|
|
|
||
|
|
export default function Home() {
|
||
|
|
const swiperRef = useRef(null)
|
||
|
|
const [activeIndex, setActiveIndex] = useState(1)
|
||
|
|
return (
|
||
|
|
<main className="min-h-screen p-4">
|
||
|
|
<div className='flex justify-between items-center'>
|
||
|
|
<Tabs
|
||
|
|
activeKey={tabItems[activeIndex].key}
|
||
|
|
onChange={key => {
|
||
|
|
const index = tabItems.findIndex(item => item.key === key)
|
||
|
|
setActiveIndex(index)
|
||
|
|
swiperRef.current?.swipeTo(index)
|
||
|
|
}}
|
||
|
|
|
||
|
|
>
|
||
|
|
{tabItems.map(item => (
|
||
|
|
<Tabs.Tab title={item.title} key={item.key} className='text-left'/>
|
||
|
|
))}
|
||
|
|
</Tabs>
|
||
|
|
<AppstoreOutline className='text-lg'/>
|
||
|
|
</div>
|
||
|
|
<Swiper
|
||
|
|
direction='horizontal'
|
||
|
|
loop
|
||
|
|
indicator={() => null}
|
||
|
|
ref={swiperRef}
|
||
|
|
defaultIndex={activeIndex}
|
||
|
|
onIndexChange={index => {
|
||
|
|
setActiveIndex(index)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Swiper.Item>
|
||
|
|
<div className="">菠萝</div>
|
||
|
|
</Swiper.Item>
|
||
|
|
<Swiper.Item>
|
||
|
|
<div className="">西红柿</div>
|
||
|
|
</Swiper.Item>
|
||
|
|
</Swiper>
|
||
|
|
</main>
|
||
|
|
)
|
||
|
|
}
|