收藏
回答

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

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

回答关注问题邀请回答
收藏

1 个回答

  • Maverick
    Maverick
    2019-05-09

    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()


    2019-05-09
    赞同
    回复 5
    • 丶期_望℡
      丶期_望℡
      2019-05-09

      这个方法可以知道滚动条到哪个标签了吗?


      2019-05-09
      回复
    • Maverick
      Maverick
      2019-05-09回复丶期_望℡

      wx.createSelectorQuery用于获取所有标签元素所处位置,onScroll用来判断滚动位置。


      wx.createIntersectionObserver用于监听元素和视口或某个区域的相交状态,同样可以推算出标签元素的位置。


      这些信息有了自然就知道滚到哪个标签了。

      2019-05-09
      回复
    • 丶期_望℡
      丶期_望℡
      2019-05-09回复Maverick

      不太会用,能教教我吗 = =、


      2019-05-09
      回复
    • Maverick
      Maverick
      2019-05-09回复丶期_望℡

      我编辑了,你看看吧。

      2019-05-09
      回复
    • 丶期_望℡
      丶期_望℡
      2019-05-10回复Maverick

      谢谢

      2019-05-10
      回复
登录 后发表内容