如何知道滚动条滚动到一个未知位置,当前处在哪个标签上
发布于 6 年前 作者 chengwei 7338 次浏览 来自 问答

如何知道滚动条滚动到一个未知位置,当前处在哪个标签上,获取当前位置标签的数据

1 回复

onScroll和wx.createSelectorQuery配合使用,性能较差

或直接用wx.createIntersectionObserver,性能较好。

//先创建个观测多个节点的相交的observer,节流设为[0,1],只在目标元素完全出现或完全消失时触发回调

const anchorObserver = this.createIntersectionObserver({

    thresholds: [0,1],

    observeAll: true

})

//所有需要监听的标签元素设置一个相同的类名,例如obs-anchor以及各自一个唯一的ID(必须)。

//用类名选择所有标签

const query = this.createSelectorQuery()

query.selectAll(.obs-anchor).boundingClientRect(anchorPointsRect=>{

    let observeSelector = ‘’

    let anchorPoints = anchorPointsRect.map((item,index)=>{

        let {id:elementID,dataset} = item

        if(elementID) observeSelector += `${index>0 ? , : ‘’}#${elementID}` //拼接所有标签ID选择器

        return{

            id: index,

            elementID,

            label: dataset.label,

            isOut: true,

            isFull: false

        } //储存一些有用的信息,可以把一些信息放在dataset里,在这可以拿到

    })

    anchorObserver.relativeToViewport(margins).observe(observeSelector, ({id,intersectionRatio})=>{

        let isOut = intersectionRatio===0 //元素是否在视口外

        ,   isFull = intersectionRatio===1 //元素是否完全显示

        let anchorPointID

        ,   fullAnchorPointID

        for(let point of anchorPoints){ //遍历所有标签

            if(point.elementID===id){ //记录当前标签状态

                point.isOut = isOut

                point.isFull = isFull

            }

            if(!point.isOut){ //如果标签不在视口外

                anchorPointID = point.id  //记录当前标签ID

            }

            if(point.isFull) fullAnchorPointID = point.id //记录完全显示的标签ID

        }

        //anchorPointID就是在视口内,且在节点树靠后(因为按节点树顺序遍历)的元素ID

        //fullAnchorPointID就是在视口内完全显示,且在节点树靠后的元素ID

        //逻辑大概就是这样,选哪个作为“当前标签”看需求

    })

}).exec()

回到顶部