最近遇到一个需求，就是实现一个小程序吸顶+锚点导航+动态锚点的功能，网上找了一通，也没有找到满意的轮子，最后就自己动手写了一个，我这里使用的是wx.pageScrollTo去实现的锚点滚动，并不是scroll-view的scroll-into-view去实现的，因为我发现scroll-into-view和吸顶的滑动有冲突，所以就换了种方法。 先看看效果吧：
要实现这个效果其实就分为三步
步骤1：在图片资源加载完成后去动态计算图片的高度
onImgLoad() {
var that = this;
let query = wx.createSelectorQuery().in(this);
let heightArr = [];
let h = 0;
query.selectAll('.navListView').boundingClientRect((react) => {
react.forEach((res) => {
h += res.height;
heightArr.push(h)
})
this.setData({
anchorArray: heightArr
});
}).exec();
//导航栏吸顶
if (that.data.navbarInitTop == 0) {
//获取节点距离顶部的距离
wx.createSelectorQuery().select('#navbar').boundingClientRect(function (rect) {
if (rect && rect.top > 0) {
var navbarInitTop = parseInt(rect.top);
that.setData({
navbarInitTop: navbarInitTop
});
}
}).exec();
}
},
步骤2：在页面的onPageScroll监听当前滚动的scrollTop，其设置顶部的tab切换选项
onPageScroll(res) {
let scrollTop = res.scrollTop
this.setData({
scrollTop
})
let scrollArr = this.data.anchorArray;
let navbarInitTop = this.data.navbarInitTop
if (scrollTop >= scrollArr[scrollArr.length - 1] + navbarInitTop) {
return;
} else {
for (let i = 0; i < scrollArr.length; i++) {
if (scrollTop >= 0 && scrollTop < scrollArr[0] + navbarInitTop) {
// navIdx控制筛选块高亮显示
this.setData({
navIdx: 0,
});
} else if (scrollTop >= scrollArr[i - 1] + navbarInitTop && scrollTop < scrollArr[i] + navbarInitTop) {
this.setData({
navIdx: i
});
}
}
}
console.log(scrollTop)
}
步骤3：点击锚点导航栏
clickScroll: function (e) {
console.log(e.target.dataset)
let idx = e.target.dataset.idx
let id = e.target.dataset.id
let scrollArr = this.data.anchorArray;
wx.pageScrollTo({
scrollTop: scrollArr[idx - 1] + this.data.navbarInitTop,
duration: 300,
success: (res) => {
this.setData({
navIdx: idx,
})
}
})
},
- 注意：剩余tab切换栏吸顶的效果是比较简单的我这里就不展开讲了，有需要去的直接去看代码片段吧
