vue组件中，监听页面滚动，实现吸顶效果，以及实现懒加载效果

实现吸顶效果

页面结构

在结构里，利用vue对象的ref绑定el-header（elementUI框架下的组件）

<template>
 <el-header ref="head" style="padding: .25rem .2rem">
      <div class="cityBox">广州市</div>
      <div class="inputBox"><input type="text" placeholder="搜索目的地国家/城市/关键词"></div>
      </el-header>
</template>

在mounted时期给window监听scrool滚动事件，并触发vue组件对象下的scroolToTop函数

<script>
export default{

methods(){
  scrollToTop(){
       var scrollTop = (window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop);//获取屏幕滚动距离
  　　 if(scrollTop > 50px){//如果滚动大于0
       this.$refs.head.$el.classList.add('indexFixedBox');//给节点添加吸顶样式
       this.serveimg = this.serve1;
       }else{//滚动小于或大于50px时，回到元素原来的位置
       this.$refs.head.$el.classList.remove('indexFixedBox');//移除节点的吸顶样式
       this.serveimg=this.serve
  }
      }
},
mounted(){//绑定事件
      window.addEventListener('scroll',this.scrollToTop);
  },
  beforeDestroy() {//更改为其它组件的时候要解绑window的事件
    window.removeEventListener("scroll",this.scrollToTop);
  },
}
</script>

加样式使页面高度能有滚动条件

<style>
body{
height:1000px;
}
</style>

vue实现懒加载效果

<template>
 <div class="wrap_main">
        <header>
            <div class="hear_all">
                <i class="hear_cs" @click="goto"></i>
                <div class="search_input">
                    <input type="search" v-model="iput" placeholder="搜索目的地国家/城市/关键词">
                    <img src="../assets/search.png" @click="request(iput)">
                    </div>
                </div>
        </header>
        <section ref="bd">
            <div class="con_main">
                 <el-menu 
                 class="el-menu-demo" 
                 mode="horizontal" >
                <el-submenu 
                v-for="(item,key1) in menus"
                :key="key1" 
                :index="key1">
                <template slot="title" >{{key1}}</template>
                <el-menu-item 
                v-for="(item2,index) in item" 
                :key="index"
                @click="request(item2)"
                style="height:40px;line-height: 40px;"
                :index="item2">{{item2}}</el-menu-item>
                </el-submenu>
                </el-menu>
            </div>
        <div class="infinite-list-wrapper" style="overflow:auto">
         <ul
            @scroll="dataload">
            <li 
            v-for="(item,index) in count"
            :key="index"
            @click="godetail(item.id)"
            >
            <dt>
                <div class="imgBox">
                    <img :src="item.img" >
                    <span>{{item.go}}</span>
                    <var class="mada_span_01">{{item.tab[0]}}</var>
                </div>
            </dt>
            <dd>
                <ul>
                    <li>
                        <strong class="title">{{item.title}}</strong>
                    </li>
                    <li>
                        <strong class="subtitle">{{item.subtitle}}</strong>
                    </li>
                    <li>
                        <p class="tab">
                            <span v-for="item2 in item.tab" :key="item2">{{item2}}</span>
                        </p>
                    </li>
                    <li>
                        <p><span>{{item.date}}</span></p>
                    </li>
                    <li>
                        <div class="price"><p><i>￥</i><strong>{{item.price}}</strong>起</p></div>
                    </li>
                </ul>
            </dd>
            </li>
        </ul>
            <p v-if="noMore">没有更多了</p>
            <p v-else>加载中...</p>
  </div>
        </section>
    </div>
</template>

获取窗口滚动距离，触发滚动的条件：滚动距离scroolTop + 可视窗口的高度 >= 整个滚动元素（滚动页面）的高度（一般大于可视窗口的高度才会有滚动条）

<script>
export default{
data(){
        return {
            count: '',//请求回的数据，不设置默认值eslint会报错
            datalong:115,//设置初始值(随机的)
            iput:''
        }
    },
    computed: {
      noMore () {//停止加载的条件，数据没有更多了
        return this.count.length >= this.datalong //本地数据内容长度大于或大于数据库请求的总数据
      },
    },
    dataload(){//懒加载请求数据函数
      if(this.count.length <= this.datalong){如果当前的数据（数组形式）长度（即数量）小于请求全部数据长度就执行懒加载
　       var scrollTop = window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;//获取页面滚动距离
         let bd = this.$refs.bd;//绑定整个滚动对象节点
          if(scrollTop+document.documentElement.clientHeight>=bd.offsetHeight){//触发滚动条件
            setTimeout(async function() {//延迟请求数据
         let {data} = await this.$axios.get('http://localhost:4399/searchlist/',{
             params:{num:this.count.length}
         });
           (data).forEach(ele => {//获取数据(一个数组)
               this.count.push(ele);//新获取的数据推进count里面
           })
        }.bind(this), 2000)//更改this指针对象指向vue对象
        }
      }},
}
</script>