Vue开发实现吸顶效果的示例代码


Posted in Javascript onAugust 21, 2018

因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的。

进入正题,先看下效果图:

Vue开发实现吸顶效果的示例代码 

其实js做这个效果还是挺简单的,因为在css中我们可以设置一个元素的 position: fixed;

,这样它就可以固定在那里,这样不管页面怎么滚动,它的位置都不受影响,所以我们的思路就是在合适的时机把要吸顶的头部元素的position属性设置为fixed就可以了。但是这个合适的时机是什么时候呢,这就需要我们计算了,我们需要监听页面的滚动状态,当页面滚动到要吸顶元素所处的位置的时候就是我们设置它固定的时候,所以就需要我们:

1.监听页面的滚动状态:

在mounted回调中加入以下代码:

mounted() {
 // handleScroll为页面滚动的监听回调
 window.addEventListener('scroll', this.handleScroll);
 },

同时在destroyed回调中移除监听:

destroyed(){
 window.removeEventListener('scroll', this.handleScroll);
},

2.计算吸顶元素到页面顶部的距离:

计算出来这个距离之后就可以确定固定吸顶元素的时机了,如果你的吸顶元素上面的元素的高度是固定的话,那就简单了,直接在handleScroll方法中进行判断就可以了,可以直接跳到第三步了,如果是动态的,那就需要我们在接口请求完数据,dom元素渲染完之后进行动态计算了,Vue中有一个很好用的方法,可以很方便的监听dom渲染完成:

// 监听dom渲染完成
this.$nextTick(function(){
 // 这里fixedHeaderRoot是吸顶元素的ID
 let header = document.getElementById("fixedHeaderRoot");
 // 这里要得到top的距离和元素自身的高度
 this.offsetTop = header.offsetTop;
 this.offsetHeight = header.offsetHeight;
 console.log("offsetTop:" + this.offsetTop + "," + this.offsetHeight);
});

3.判断页面滚动距离:

handleScroll(){
 // 得到页面滚动的距离
 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 // 判断页面滚动的距离是否大于吸顶元素的位置
 this.headerFixed = scrollTop > (this.offsetTop - this.offsetHeight * 2);
},

ps:这里理论上其实应该是scrollTop > (this.offsetTop - this.offsetHeight),但是不知道为啥我这里做出来后滚动到吸顶元素位置的时候scrollTop还是比this.offsetTop - this.offsetHeight的值小,所以这里*2,这样得出来的值才刚刚好,如果有知道的朋友可以帮忙解惑一下。

上面我们得到了一个headerFixed的boolean属性值,接下来我们只需要根据它的值来设置吸顶元素的 position: fixed; 属性就可以了。 我们可以写一个css样式:

.isFixed{
 position: fixed;
 top: px2rem(110);
 left: px2rem(20);
 right: px2rem(20);
}

然后Vue可以在dom元素里这样动态设置class,非常方便:

<div id="fixedHeaderRoot">
 <div id="knowPointHeader" class="knowPointHeader" :class="headerFixed?'isFixed':''">
 <div><span>知识模块</span></div>
 <div><span>知识点</span></div>
 <div><span>能力要求</span></div>
 </div>
</div>

其实到这里这个效果已经实现完成了,不过我在测试过程中发现,因为ios手机页面滚动到底部的时候,还可以上拉,有一个橡皮筋效果,这个效果会导致一个我们页面的一个Bug,因为它的这种橡皮筋效果也会触发页面滚动的监听,当数据很多的时候其实看不出来,只有当数据刚好占满屏幕的时候,这个时候你再继续往上滑动屏幕,就会触发页面的滚动监听,这个时候handleScroll方法中计算出来的值scrollTop是大于吸顶元素top的距离,所以吸顶元素会被设置为固定属性,大家知道一个元素一旦被设置为 position: fixed; ,那么它就会相对于浏览器窗口进行定位,这样我们下面的内容就会往上顶,这样的话scrollTop的值又小于了吸顶元素top的距离,这样headerFixed属性又为false, position: fixed; 属性又没有了,这样它就又相对与它原本的父元素进行定位,这样就成了一个循环,你会发现页面会上下跳到,这样是肯定不行的,所以我下面又针对这个问题进行了一个优化,当然这个方案感觉不是特别完美,不过确实可以解决这个问题。

通过上面的分析我们可以得知造成这个问题的原因是因为我们把设置了元素的 position: fixed; 属性,使得下面的内容往上顶,所以要想解决这个问题,那我们就不固定这个元素,但是这样的话就达不到吸顶的效果了,所以我们需要再加一个和吸顶元素一模一样的元素,它一直就是固定状态:

<div id="fixedHeaderRootReal">
 <div class="knowPointHeader isFixed" v-show="headerFixed">
 <div><span>知识模块</span></div>
 <div><span>知识点</span></div>
 <div><span>能力要求</span></div>
 </div>
</div>

这个元素默认是隐藏的,只有当页面滚动的距离达到了它的位置的时候我们才让它显示,由于它是固定状态,所以它的隐藏显示并不会对页面产生影响,这样下面的内容就不会往上顶了,就可以解决ios手机上拉页面橡皮筋效果的Bug了,当然这种方式有些取巧,但是暂时没有更好的解决方案了,如果大家有更好的解决方案,欢迎在下面评论。最后给大家看一下我的页面布局:

<div v-show="kpointListShow" class="knowPointList">
  <div id="fixedHeaderRoot">
  <div id="knowPointHeader" class="knowPointHeader">
   <div><span>知识模块</span></div>
   <div><span>知识点</span></div>
   <div><span>能力要求</span></div>
  </div>
  </div>
  <div id="fixedHeaderRootReal">
  <div class="knowPointHeader isFixed" v-show="headerFixed">
   <div><span>知识模块</span></div>
   <div><span>知识点</span></div>
   <div><span>能力要求</span></div>
  </div>
  </div>
  <div class="knowPointItem" v-for="(kpointItem,index) in rows.kpointList" :key="index">
  <div><span>{{kpointItem.knowModule}}</span></div>
  <div><span>{{kpointItem.knowPoint}}</span></div>
  <div><span>{{kpointItem.abilityRequire}}</span></div>
  </div>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
js运动动画的八个知识点
Mar 12 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
js图片上传的封装代码
Aug 01 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
js canvas实现红包照片效果
Aug 21 #Javascript
js实现简单选项卡功能
Mar 23 #Javascript
js实现轮播图的完整代码
Oct 26 #Javascript
JQuery扩展对象方法操作示例
Aug 21 #jQuery
详解Vue结合后台的列表增删改案例
Aug 21 #Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 #Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 #Javascript
You might like
php Try Catch异常测试
2009/03/01 PHP
两个开源的Php输出Excel文件类
2010/02/08 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
聊聊python中的异常嵌套
2020/09/01 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
大学生毕业自荐信
2013/10/10 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
函授生自我鉴定
2014/03/25 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
实习科室评语
2015/01/04 职场文书
如何撰写创业策划书
2019/06/27 职场文书
nginx内存池源码解析
2021/11/20 Servers
Python使用DFA算法过滤内容敏感词
2022/04/22 Python