onPageScroll怎么实现页面内容滚动，顶部步骤条相应切换？
写了一个信息录入的界面，录入的内容比较多； 录入内容包括四大块。怎么实现页面内容滚动到相应内容区域时顶部的步骤条也自动改变。 如我滚动到第二块录入内容时，顶部步骤条【第二步】高亮； 滚动到第三块录入内容时，顶部步骤条【第三步】高亮； 滚动到第四块录入内容时，顶部步骤条【第四步】高亮 相应的，当第四块内容离开顶部时，取消第四步高亮，第三步变成高亮，以此类推。 目前我写成一下这样，发现并不能实现我想要的效果，顶部的步骤条无规律乱跳。 顶部步骤条为 vant weapp 组件，van-steps onPageScroll:function(e){
var step_height= this.data.step_height; //步骤条的高度，在onReady里获取。
let _this=this;
let query = wx.createSelectorQuery()
query.select('#thesecond').boundingClientRect( (rect1) => {
let top = rect1.top
if (top <= step_height) { //临界值
_this.setData({
active: 1, //设置第二步高亮
})
} else {
_this.setData({
active: 0,
})
}
}).exec();
wx.createSelectorQuery().select('#thethird').boundingClientRect( (rect1) => {
let top = rect1.top
if (top <= step_height) { //临界值
_this.setData({
active: 2, //设置第3步高亮
})
} else {
_this.setData({
active: 1,
})
}
}).exec();
query.select('#theforth').boundingClientRect( (rect2) => {
let top = rect2.top
if (top <= step_height) { //临界值
_this.setData({
active: 3, //设置第4步高亮
})
} else {
_this.setData({
active: 2,
})
}
}).exec();
}
[图片]
