ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2021-04-13 15:00:49  阅读:144  来源: 互联网

标签:navbarInitTop 微信 距离 data 滚动 var scrollTop 滚到 节点


在这里插入图片描述

=======================================================================================================
在这里插入图片描述
比如这个地方,需要滚动到屏幕最上端后固定
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
        });
      }

  },

标签:navbarInitTop,微信,距离,data,滚动,var,scrollTop,滚到,节点
来源: https://blog.csdn.net/weixin_42900082/article/details/115665880

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有