105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
import { ScrollView, View } from "@tarojs/components"
|
|
import { memo, ReactNode, useRef, useState } from "react"
|
|
import styles from "./index.module.scss"
|
|
import classnames from "classnames";
|
|
import Taro, { useReady } from "@tarojs/taro";
|
|
import InfiniteScroll from "../infiniteScroll";
|
|
|
|
type ListProps = {
|
|
title: string,
|
|
value: number
|
|
}
|
|
|
|
type Params = {
|
|
list?: ListProps[],
|
|
defaultValue?: number|string,
|
|
children?: ReactNode,
|
|
height?: string,
|
|
heightItem?: number,
|
|
sideBarOnClick?: (ListProps) => void
|
|
}
|
|
|
|
export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClick, children, heightItem = 100}: Params) => {
|
|
|
|
let num_half = useRef(0)
|
|
|
|
const [selected, setSelected] = useState(defaultValue)
|
|
const [tabId, setTabId] = useState('')
|
|
|
|
const init = () => {
|
|
const index = list?.findIndex(item => {
|
|
return item.value == defaultValue
|
|
})
|
|
if(index !== -1) {
|
|
computeSelectTab(index)
|
|
}
|
|
}
|
|
|
|
const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
|
|
setSelected(item.value)
|
|
sideBarOnClick?.(item)
|
|
computeSelectTab(index)
|
|
}
|
|
|
|
const computeSelectTab = (index) => {
|
|
if((index + 1) > num_half.current) {
|
|
let num = index + 1 - num_half.current
|
|
setTabId(list[num].value.toString())
|
|
} else {
|
|
setTabId(list[0].value.toString())
|
|
}
|
|
}
|
|
|
|
useReady(() => {
|
|
Taro.nextTick(() => {
|
|
let query = Taro.createSelectorQuery();
|
|
query.select('.side_bar_select').boundingClientRect(rect=>{
|
|
console.log('rect::',rect)
|
|
let clientHeight = rect.height;
|
|
let clientWidth = rect.width;
|
|
let ratio = 750 / clientWidth;
|
|
let height = clientHeight * ratio;
|
|
num_half.current = Math.ceil(height/2/heightItem)
|
|
init()
|
|
}).exec();
|
|
})
|
|
})
|
|
|
|
//触底事件
|
|
const onScrolltolower = () => {
|
|
console.log('触底了')
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<View className={classnames(styles.sideBar_main,'side_bar_select')}>
|
|
<ScrollView scrollWithAnimation={true} style={{height}} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
|
|
{
|
|
list?.map((item, index) => {
|
|
return(
|
|
<View
|
|
className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.value)})}
|
|
onClick={() => clickEvent({item, index})}
|
|
id={`tab_${item.value}`}
|
|
key={item.value}
|
|
style={{height:heightItem+'rpx'}}
|
|
>
|
|
<View className={styles.title_con}>
|
|
{item.title}
|
|
</View>
|
|
</View>
|
|
)
|
|
})
|
|
}
|
|
<View className="common_safe_area_y"></View>
|
|
</ScrollView>
|
|
<View className={styles.sideBar_con}>
|
|
<InfiniteScroll selfonScrollToLower={() => onScrolltolower()}>
|
|
{children}
|
|
</InfiniteScroll>
|
|
</View>
|
|
</View>
|
|
|
|
</>
|
|
)
|
|
}) |