Vue开发示例代码以实现天花板效果

因为项目的需要，最近开始在微信官方账号开发微信，接触到了Vue框架。虽然这种效果的实现是基于Vue框架的，但其他地方也可以借鉴，原理也是一样的。

进入正题，先看效果图：

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

，这样就可以把它固定在那里，这样不管页面怎么滚动，它的位置都不会受到影响，所以我们的想法是在合适的时候把要被吸住的head元素的位置属性设置为fixed。但是什么时候才是合适的时机呢？这需要我们去计算。我们需要监控页面的滚动状态。当页面滚动到要吸顶元素的位置时，就是我们设置为固定的时候了，所以我们需要：

1.监控页面的滚动状态：

将以下代码添加到已装入的回调中：

Mounted() {//handleScroll是监听回调窗口。addeventlistener ('scroll '，这。handscroll)；}，并删除被破坏的回调中的监听：

销毁(){ window . removeeventlistener(' scroll '，this . handlescroll)；},2.计算从顶部元素到页面顶部的距离：

计算出这个距离后，就可以确定固定吸顶元件的时间。如果你的顶部吸收元件上方的元件高度是固定的，那就简单了。可以在handleScroll方法中直接判断，也可以直接跳到第三步。如果是动态的，我们需要在接口请求数据和dom元素被渲染后进行动态计算。Vue中有一个非常有用的方法可以方便地监控dom呈现：

//监控dom呈现以完成此操作。$nextTick(function(){ //这里，fixedHeaderRoot是IDlet header=document。getelementbyid(' fixed header root ')；//在这里得到顶部的距离和元素本身的高度。offsettop=标头。偏移；this . offset heat=header . offset heat；console . log(' offset top : ' this . offset top '，' this . offset theight)；});3.判断页面滚动距离：

HandleScroll(){ //获取页面滚动的距离让scroll top=window . page offset | | document . document element . scroll top | | document . body . scroll top；//判断页面滚动的距离是否大于吸顶元件的位置。this . header fixed=scroll top(this . offset top-this . offset heart * 2)；}，ps:理论上，应该是scrollTop(这个。偏移-这个。偏右)，但我不知道为什么scrolltop还是比这个小。偏移-这个。在这里完成后，当我滚动到顶部元素位置时，右边，所以这里*2，通过这种方式获得的值是正确的。如果你有认识的朋友，可以帮我解决问题。

上面我们得到了一个headerFixed的布尔属性值，然后我们只需要根据它的值设置top元素的position: fixed物业就行。我们可以写一个css样式：isFixed { position: fixedtop : px2e rem(110)；left : px2e rem(20)；right : p x2 rem(20)；}然后Vue可以在dom元素中动态设置类，非常方便：

div id=' FixedHeaderRoot ' div id=' knowpointHeader ' class=' knowpointHeader ' : class=' Headerfixed '？Isfixed' :'' div span知识模块/span/div span知识点/span/div span能力需求/span/div /div/div其实这个效果在这里已经达到了，但是我在测试的时候发现，当ios手机页面滚动到底部的时候，还是可以拉起来的，有橡皮筋的效果。这种效果会导致我们的页面出现Bug，因为它的橡皮筋效应也会触发对页面滚动的监控。数据多了就看不到了。只有当数据刚刚填满屏幕时，这一次你继续向上滑动屏幕，这将触发页面的滚动监控。此时，在handleScroll方法中计算的scrollTop值大于Top元素顶部的距离，因此top元素将被设置为固定属性。大家都知道，一个元素一旦被设置为，那么它就会相对于浏览器窗口进行定位，这样我们下面的内容就会上顶，这样scrollTop的值就小于吸顶元素top的距离，这样headerFixed属性为false，位置：固定；该属性消失了，因此它相对于其原始父元素定位，成为一个循环。你会发现页面会上下跳动，这肯定是不可行的，所以我针对这个问题做了一个优化。当然，这个方案并不完美，但确实可以解决这个问题。

通过上面的分析，我们可以知道出现这个问题的原因是我们用元素将position:设置固定；属性，所以如果我们想解决这个问题，我们就不会固定这个元素，但这样我们就不会达到顶部吸收的效果，所以我们需要添加另一个与顶部吸收元素完全相同的元素，它一直处于固定状态：

Div id=' fixed headerroostream ' Div class=' knowpointheader fixed ' v-show=' header fixed ' Div span知识模块/span/Div span知识点/span/Div span能力要求/span/div/Div默认为隐藏，只有当页面的滚动距离到达其位置时，我们才能显示。因为是固定状态，所以它的隐藏显示不会影响页面，这样就不会把后面的内容往上推，可以解决ios手机上拉页面橡皮筋效果的Bug。当然，这种方法有些棘手，但暂时没有更好的解决办法。如果你有更好的解决方案，请在下面评论。最后，让我向您展示我的页面布局：

Div-show=' kpointlistsshow ' class=' known point list ' Div id=' fixed headerroot ' Div id=' known point header ' class=' known point header ' Div span知识模块/span/Div span知识点/span/Div span能力要求/span/Div/Div/Div id=' fixed headerroostream ' Div class=' known point header是固定的' v-show=' header fixed fixed ' Div span知识模块/span/Div/Div span知识点/span/span/Div/Div span能力要求/kpointlist ' : key=' index ' div span { { kpointem。know module } }/span/div div span { { kpointem }。known point } }/span/div div span { { kpointem。能力要求

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。