taro/src/pages/friend/friend.tsx

import TabBar from "@/components/navigation/TabBar";
import { rpxToPx } from "@/utils/tools";
import { View, Text, Image,ScrollView } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect } from "react";
export default function Friend() {
    const observerObjBottom = Taro.createIntersectionObserver().relativeToViewport({bottom:100})
    useEffect(()=>{
        observerObjBottom.observe('#a',(res)=>{
            console.log('a')
        })
        observerObjBottom.observe('#b',(res)=>{
            console.log('b')
        })
        observerObjBottom.observe('#c',(res)=>{
            console.log('c')
        })
        observerObjBottom.observe('#d',(res)=>{
            console.log('d')
        })
        observerObjBottom.observe('#e',(res)=>{
            console.log('e')
        })
    },[])
    return <View>
        <ScrollView scrollY style={{height:'100vh'}}>
            <View style={{height:'100vh',backgroundColor:'pink',width:rpxToPx(750)}} id="a"></View>
            <View style={{height:'100vh',backgroundColor:'blue',width:rpxToPx(750)}} id="b"></View>
            <View style={{height:'100vh',backgroundColor:'yellow',width:rpxToPx(750)}} id="c"></View>
            <View style={{height:'100vh',backgroundColor:'green',width:rpxToPx(750)}} id="d"></View>
            <View style={{height:'100vh',backgroundColor:'red',width:rpxToPx(750)}} id="e"></View>
        </ScrollView>
        {
            process.env.TARO_ENV == 'weapp' && <TabBar index={4} />
        }
    </View>
}