=======================================================================================================
比如这个地方,需要滚动到屏幕最上端后固定
1.在data中设置一个变量
data:{
navbarInitTop: 0, //导航栏初始化距顶部的距离
}
2.在等商品详情或者全部接口都查询完数据,数据都填充好以后,找位置执行
if (that.data.navbarInitTop == 0) {
//获取节点距离顶部的距离
wx.createSelectorQuery().select('#navbar').boundingClientRect(function (rect) {
if (rect && rect.top > 0) {
var navbarInitTop = parseInt(rect.top) - 64;
that.setData({
navbarInitTop: navbarInitTop
});
}
}).exec();
}
用来确定navbar(我这个绿色部分圈起来的id=“navbar”)距离顶部的高度
3.写个滚动时触发的事件
//监听屏幕滚动 判断上下滚动
onPageScroll: function (ev) {
var scrollTop = ev.scrollTop;
var that = this;
var scrollTop = parseInt(ev.scrollTop); //滚动条距离顶部高度
//判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
var isSatisfy = scrollTop >= that.data.navbarInitTop - 18 ? true : false;
//为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
if (that.data.isFixedTop === isSatisfy) {
return false;
}
// if(isSatisfy){
// wx.pageScrollTo({
// scrollTop: this.data.navbarInitTop - 25 , // 滚动到的位置(距离顶部 px)
// duration: 0 //滚动所需时间 如果不需要滚动过渡动画,设为0(ms)
// })
// }
that.setData({
isFixedTop: isSatisfy
});
}
},