zoukankan      html  css  js  c++  java
  • vue-监听视图滚动-加载下一页数据(鼠标滚动到底,加载)

    <div class="daily-list" ref="list">
                <template>
                    <div v-for="(item,index) in arrayItem" :key="index">
                        <div>{{item}}</div>
                    </div>
                </template>
            </div>
    

     data:

     arrayItem: 100,
     isLoading: false
     
    style:
     
    .daily-list{
        width300px;
        positionfixed;
        top0;
        bottom0;
        left150px;
        /* 具备滚动的能力 */
        overflowauto;
        border-right1px solid #d7dde4;
    }
    mounted() {
             // 获取dom
             const $list = this.$refs.list;
             // 监听内容的滚动事件
                $list.addEventListener('scroll', () => {
                    if (this.isLoading) return;
                    // 已经滚动的距离加页面的高度,等于整个内容区域高度时,视为接触底部
                    console.log('已经滚动距离',$list.scrollTop);
                    console.log('页面的高度',document.body.clientHeight);
                    console.log('内容区域高度',$list.scrollHeight);
                    if
                    (
                        $list.scrollTop
                        + document.body.clientHeight
                        >= $list.scrollHeight
                    )
                    {
                       console.log('到底了');
                       this.isLoading = true;
                       setTimeout(()=>{
                           this.arrayItem = 200;
                           this.isLoading = false;
                       },2000)
                    }
                });
        },
    

     或者

            <div class="daily-list" ref="list" @scroll="handleScroll">
                <template>
                    <div v-for="(item,indexin arrayItem" :key="index">
                        <div>{{item}}</div>
                    </div>
                </template>
            </div>
    methods: {
     handleScroll(){
                const $list = this.$refs.list;
                if (this.isLoadingreturn;
                if
                    (
                        $list.scrollTop
                        + document.body.clientHeight
                        >= $list.scrollHeight
                    )
                    {
                       console.log('到底了');
                       this.isLoading = true;
                       setTimeout(()=>{
                           this.arrayItem = 200;
                           this.isLoading = false;
                       },2000)
                    }
            }
    }
     

  • 相关阅读:
    故乡
    webService和Restful
    java多线程(六)线程控制类
    java内存模型
    java多线程(五)线程通讯
    java多线程(四)死锁
    java多线程(三)线程的安全问题
    java多线程(二)线程的生命周期
    java多线程(一)创建线程的四种方式
    Spring Cloud(一)简单的微服务集成Eureka
  • 原文地址:https://www.cnblogs.com/fdxjava/p/14803068.html
Copyright © 2011-2022 走看看