diff --git a/src/index.tsx b/src/index.tsx index 151598e..4e0a2aa 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -185,7 +185,7 @@ function VTable(props: any, otherParams): JSX.Element { const { style, children, ...rest } = props const { width, ...rest_style } = style - const { vid, scrollY, reachEnd, onScroll, resetScrollTopWhenDataChange } = + const { vid, scrollY, heightAsTableHeight, reachEnd, onScroll, resetScrollTopWhenDataChange } = otherParams ?? {} const [state, dispatch] = useReducer(reducer, initialState) @@ -234,6 +234,13 @@ function VTable(props: any, otherParams): JSX.Element { return temp }, [state.rowHeight, totalLen]) + const realHeight = useMemo(() => { + if (heightAsTableHeight && typeof tableHeight === 'number' && typeof scrollY === 'number') { + return Math.max(scrollY - 10, tableHeight); + } + return tableHeight; + }, [heightAsTableHeight, scrollY, tableHeight]); + // table的scrollY值 const [tableScrollY, setTableScrollY] = useState(0) @@ -373,7 +380,7 @@ function VTable(props: any, otherParams): JSX.Element { style={{ width: '100%', position: 'relative', - height: tableHeight, + height: realHeight, boxSizing: 'border-box', paddingTop: state.curScrollTop, }} @@ -409,6 +416,8 @@ function VTable(props: any, otherParams): JSX.Element { // ================导出=================== export function VList(props: { height: number | string + // 是否需要将tableHeight和height的最大值作为table的body高度使用(仅height为数字时才生效) + heightAsTableHeight?: boolean; // 到底的回调函数 onReachEnd?: () => void onScroll?: () => void @@ -429,6 +438,7 @@ export function VList(props: { const { vid = DEFAULT_VID, height, + heightAsTableHeight = false, onReachEnd, onScroll, onListRender, @@ -455,6 +465,7 @@ export function VList(props: { VTable(p, { vid, scrollY: height, + heightAsTableHeight, reachEnd: onReachEnd, onScroll, onListRender,