获取Ant Design Mobile ListView 长列表滚动位置、设置滚动位置

[xianzou]

获取Ant Design Mobile ListView 长列表滚动位置、设置滚动位置

用于获取长列表滚动位置、设计滚动位置，常见于列表跳转后需要记录位置信息，返回需要回到之前位置

代码

export const useListViewScollTop = () => {
    const listViewDOM = useRef({
        listviewRef: {
            ListViewRef: {
                ScrollViewRef: {
                }
            }
        }
    });
    // 获取滚动位置
    const getScrollTop = () => {
        const { ScrollViewRef } = listViewDOM.current.listviewRef.ListViewRef;

        return ScrollViewRef.scrollTop;
    };
    // 设置滚动位置
    const setScrollTop = scrollTopVal => {
        const { ScrollViewRef } = listViewDOM.current.listviewRef.ListViewRef;

        if (ScrollViewRef){
            ScrollViewRef.scrollTo(0, scrollTopVal);
        }
    };

    return {
        listViewDOM,
        getScrollTop,
        setScrollTop
    };
};

使用

import { useListViewScollTop } from '@/utils/hooks';

const List = () => {
    
    const {
        listViewDOM,
        getScrollTop,
        setScrollTop
    } = useListViewScollTop();
    ....
    
    return (
        <ListView
            dataSource={dataSource}
            ref={r => (listViewDOM.current = r)}
            ...
       />
    )
}