61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { ScrollView, View } from '@tarojs/components'
|
|
import type { ReactNode } from 'react'
|
|
import { memo, useEffect, useState } from 'react'
|
|
import classnames from 'classnames'
|
|
import styles from './index.module.scss'
|
|
|
|
interface ListProps {
|
|
title: string
|
|
value: number
|
|
}
|
|
|
|
interface Params {
|
|
list?: ListProps[]
|
|
defaultValue?: number|string
|
|
children?: ReactNode
|
|
tabsOnClick?: (ListProps) => void
|
|
style?: Object
|
|
|
|
}
|
|
const Tabs = ({ list = [], defaultValue = 0, tabsOnClick, style = {} }: Params) => {
|
|
const [selected, setSelected] = useState(defaultValue)
|
|
const [tabId, setTabId] = useState('')
|
|
|
|
useEffect(() => {
|
|
const index = list?.findIndex((item) => {
|
|
return item.value == defaultValue
|
|
})
|
|
if (index !== -1) {
|
|
const num = index > 0 ? (index - 1) : 0
|
|
setTabId(list[num].value.toString())
|
|
}
|
|
}, [])
|
|
|
|
const clickEvent = ({ item, index }: { item: ListProps; index: number }) => {
|
|
setSelected(item.value)
|
|
tabsOnClick?.(item)
|
|
const num = index > 0 ? (index - 1) : 0
|
|
setTabId(list[num].value.toString())
|
|
}
|
|
return (
|
|
<>
|
|
<View className={styles.tabs_main} id="tabs_main_ref">
|
|
<ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation scrollIntoView={`tabs_${tabId}`}>
|
|
<View className={styles.tabs_scroll}>
|
|
{
|
|
list.map((item, index) => {
|
|
return (
|
|
<View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({ item, index })}>
|
|
<View className={classnames(styles.tabs_item_con, { [styles.tabs_item_select]: selected == item.value })}>{item.title}</View>
|
|
</View>
|
|
)
|
|
})
|
|
}
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
export default memo(Tabs)
|