zoukankan      html  css  js  c++  java
  • vue-触底加载更多

    方法一:插件 vue-infinite-scroll

    <template>
      <div>
        <div class="demo1" v-for="index of count" :key="index">
          demo
        </div>
        <div 
          v-infinite-scroll="loadMore" 
          infinite-scroll-disabled="busy" 
          infinite-scroll-distance="410">
        </div>
      </div>
    </template>
    
    <script>
    // infinite-scroll-disabled控制是否
    // infinite-scroll-distance 距离底部多少出发
    import infiniteScroll from 'vue-infinite-scroll'
    export default {
      name:'demo',
      data(){
        return{
          count:50,
          busy:false
        }
      },
      directives: {
        infiniteScroll
      },
      methods:{
        loadMore(){
          this.busy=true
          setTimeout(()=>{  
            this.count=this.count+50
            this.busy=false
          },2000)
        }
      }
    }
    </script>
    
    
    <style lang="scss" scoped>
    .demo1{
      height: 30px;
    }
    </style>

    方法二:封装一个方法

    const scroll={
        isEnd:false,
        start(callback){
            let timer=null
            callback && window.addEventListener('scroll',()=>{
                if(timer){
                    clearTimeout(timer)
                }
                //函数防抖动
                timer=setTimeout(()=>{
                    //游览器向上滚动的高度
                    const scrollTop=document.documentElement.scrollTop
                    //文档真实的高度
                    const scrollHeight=document.documentElement.scrollHeight
                    //游览器窗口(文档)的可是高度,就是肉眼可见的那部分真实高度
                    const clientHeight=document.documentElement.clientHeight
                    if(!this.isEnd && scrollHeight===scrollTop+clientHeight){
                        window.scrollTo(0,scrollTop-100)
                        callback()
                    }
                },300)
            })
        },
        end(){
            this.isEnd=true
        }
    }
    
    export default scroll

    使用

    import scroll from '@/utils/scroll.js';

    scroll.start(this.getList)

    方法三:在某个容器中触底事件

    document.getElementById('div').onscroll=()=>{ }
  • 相关阅读:
    《Vue.js 2.x实践指南》 已出版
    《H5+移动应用实战开发》已出版
    关于《ASP.NET MVC企业级实战》
    ASP.NET MVC企业级实战目录
    ASP.NET MVC4入门到精通系列目录汇总
    网站服务架构
    ASP.NET MVC搭建项目后台UI框架—1、后台主框架
    webpack介绍—上
    通过一个vue+elementUI的小实例来讲解一下它们是如何使用的
    不要为自己学历低找借口
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/12768733.html
Copyright © 2011-2022 走看看