微信小程序元素节点滚到某位置后固定

微信小程序元素节点滚到某位置后固定

=======================================================================================================
微信小程序元素节点滚到某位置后固定
比如这个地方,需要滚动到屏幕最上端后固定
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
        });
      }

  },
上一篇:2021-04-08


下一篇:微信小程序页面滚动时,固定元素半透明右移;页面停止滚动时,固定左移恢复原样