taro/src/pages/clock/components/index_tab.tsx

import { View } from "@tarojs/components";
import './index_tab.scss'
import { useEffect, useState } from "react";
import NewButton, { NewButtonType } from "@/_health/base/new_button";

export default function IndexTab(props: { items: any, current: number,onChanged:any }) {
    
    const [selIndex,setSelIndex] = useState(props.current??0)

    useEffect(()=>{
        setSelIndex(props.current)
    },[props.current])
    
    return <View className="index_tabbar" style={{alignItems:'center',justifyContent:'center'}}>
        {
            props.items.map((item, index) => {
                return <NewButton type={NewButtonType.custom} key={index} onClick={()=>{
                    setSelIndex(index)
                    props.onChanged(index)
                }}>
                    <View className="index_tabbar_item">
                        <View className={index==selIndex?'tab_item_sel':'tab_item_nor'}>{item}</View>
                        <View className={index==selIndex?'tab_item_line_sel':'tab_item_line'}></View>
                    </View>
                </NewButton>
            })
        }
    </View>
}