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 处理URL实用技巧
Nov 23 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
回顾Javascript React基础
Jun 15 Javascript
用JS创建一个录屏功能
Nov 11 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在Web开发领域的优势
2006/10/09 PHP
php编写一个简单的路由类
2011/04/13 PHP
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python中kmeans聚类实现代码
2018/02/23 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
使用python实现对元素的长截图功能
2019/11/14 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
进修护士自我鉴定
2013/10/14 职场文书
保险内勤岗位职责
2014/04/05 职场文书
三年级评语大全
2014/04/23 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
2014年评职称工作总结
2014/11/20 职场文书
2015年营业员工作总结
2015/04/23 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python