小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如何知道滚动条滚动到一个未知位置,当前处在哪个标签上,获取当前位置标签的数据
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()
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
这个方法可以知道滚动条到哪个标签了吗?
wx.createSelectorQuery用于获取所有标签元素所处位置,onScroll用来判断滚动位置。
wx.createIntersectionObserver用于监听元素和视口或某个区域的相交状态,同样可以推算出标签元素的位置。
这些信息有了自然就知道滚到哪个标签了。
不太会用,能教教我吗 = =、
我编辑了,你看看吧。
谢谢
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
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()
这个方法可以知道滚动条到哪个标签了吗?
wx.createSelectorQuery用于获取所有标签元素所处位置,onScroll用来判断滚动位置。
wx.createIntersectionObserver用于监听元素和视口或某个区域的相交状态,同样可以推算出标签元素的位置。
这些信息有了自然就知道滚到哪个标签了。
不太会用,能教教我吗 = =、
我编辑了,你看看吧。
谢谢