如何知道滚动条滚动到一个未知位置,当前处在哪个标签上,获取当前位置标签的数据
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()