原来不用better-scroll插件vue也能实现吸顶效果

原来不用better-scroll就可以实现吸顶功能,之前还一直以为,必须要用呢,面试被稳得晕头转向的

scroll事件:

文档视图或者一个元素在滚动时,会触发元素的scroll事件。

注意:在 iOS UIWebViews中, 滚动进行时不会触发 scroll 事件;只有当滚动结束后事件才会被触发。参见 Bootstrap issue #16202。Safari 和 WKWebViews 则没有这个问题。

Scroll 事件节流

由于 scroll 事件可被高频触发,事件处理程序不应该执行高性能消耗的操作,如DOM操作。而更推荐的做法是使用 requestAnimationFrame(), setTimeout()CustomEvent 给事件节流,如下所述。

然而需要注意的是,输入事件和动画帧常常以差不多的频率被触发,因此以下优化常常不必要。这个例子使用 requestAnimationFrame 优化 scroll 事件。

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // 根据滚动位置做的事
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});

Vue.js中this.$nextTick()的使用

https://www.cnblogs.com/jin-zhe/p/9985436.html

吸顶实现

<script rel="script" src="vue.js"></script>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>...</li>
</ul>
<ul class="box_fixed" id="boxFixed" :class="{'is_fixed' : isFixed}"></ul>
<ul>
    <li>111</li>
    <li>剩下的为了实现滚动效果自己补充几个就行了,放在这里看着太麻烦了</li>
</ul>
<script>
    var vm = new Vue({
        el : '#boxFixed',
        data() {
            return {
                isFixed: false,
                offsetTop: 0
            }
        },
        mounted() {
            window.addEventListener('scroll', this.initHeight);//addEventListener用于向指定元素添加事件句柄
            this.$nextTick(() => {
                //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
                this.offsetTop = document.querySelector('#boxFixed').offsetTop;
                console.log(this.offsetTop);
            })
        },
        methods: {
            initHeight() {
                // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
                console.log(scrollTop);
                this.isFixed = scrollTop > this.offsetTop ? true : false;
            },
        }
    });

</script>
</body>
<style>
    li{
        width: 500px;
        height: 40px;
        margin: 0 auto;
        line-height: 40px;
    }
    .box_fixed{
        width: 500px;
        height: 40px;
        border: 2px dashed pink;
        border-radius: 20px;
        margin: 0 auto;
        line-height: 40px;
        background: #eeeeee;
    }
    .is_fixed{
        position: fixed;
        top: 0;
        left: 400px;
        z-index: 999;
    }
</style>

滚动前:
原来不用better-scroll插件vue也能实现吸顶效果_第1张图片
滚动后吸顶:
原来不用better-scroll插件vue也能实现吸顶效果_第2张图片
参考:https://www.jianshu.com/p/5fc421a2f12a

你可能感兴趣的:(原来不用better-scroll插件vue也能实现吸顶效果)