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 相关文章推荐
js异步加载的三种解决方案
Mar 04 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
小程序实现图片移动缩放效果
May 26 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
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
vue3.0 上手体验
2020/09/21 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python3序列化与反序列化用法实例
2015/05/26 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python中如何导入类示例详解
2019/04/17 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python中必要的名词解释
2019/11/20 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
节能环保标语
2014/06/12 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
考勤制度通知
2015/04/25 职场文书
会计主管竞聘书
2015/09/15 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL