62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import { ScrollView, View } from "@tarojs/components";
|
|
import { memo, useState, ReactNode, useEffect } from "react";
|
|
import classnames from "classnames";
|
|
import styles from './index.module.scss'
|
|
|
|
|
|
type ListProps = {
|
|
title: string,
|
|
value: number
|
|
}
|
|
|
|
type Params = {
|
|
list?: ListProps[],
|
|
defaultValue?: number|string,
|
|
children?: ReactNode,
|
|
tabsOnClick?: (ListProps) => void,
|
|
style?:Object,
|
|
|
|
}
|
|
|
|
export default memo(({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={true} 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>
|
|
</>
|
|
)
|
|
})
|