微信小程序实现滑动到指定位置导航吸顶效果切换导航页面滚动到指定位置

微信小程序实现滑动到指定位置导航吸顶效果

场景：Taro+React

设置ScrollView的scrollTop 设置成一个值的时候 只有第一次生效 要想点击每次都生效的时候需要 用一个随机值Math.random() 重新设置scrollTop 才能生效。

const MyDetail = () => {
 const [activeTab, setActiveTab] = useState(1); // 1是正确 2是错误
 const [isFixed, setIsFixed] = useState(false); // 正确题目和错误题目是否定位
 const [scrollTop, setScrollTop] = useState(0); // 滚动条位置


const handleScroll = e => {
    if (e.detail.scrollTop > 210) {
        setIsFixed(true);
    } else {
        setIsFixed(false);
    }
};

 const handleTabCallBack = () => {
    if (isFixed) {
        const newScrollTop = Math.random() + 220;
        setScrollTop(newScrollTop);
    }
};
    
return (
    <ScrollView
        scrollY
        className='answer-match-detail-wrapper'
        scrollTop={scrollTop}
        onScroll={handleScroll}>
        <View>
            <View className='detail-top'><View>
            <View className='tab' 
                data={{
                    activeTab: activeTab,
                    setActiveTab: setActiveTab,
                    handleTabCallBack: handleTabCallBack,
                    numArr: [
                        answerListData[0].length,
                        answerListData[1].length,
                    ],
                    fixed: isFixed,
                }}>
           <View>
           <View className='detail-list'><View>
       <View>
    </ScrollView>
)}

export default MyDetail;