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)
                    }
            }
    }
     

  • 相关阅读:
    qq链接
    HTML5获取地理坐标
    AJAX的同步和异步的区别
    取消版本控制
    格式化打印数组函数
    图片返回刷新
    从哪些方面优化网站
    朋友圈的基本数据结构设计是怎样的?既能做到完美阅读权限设置,又能兼顾性能?
    表单提交数据安全性验证
    自然世界的划分
  • 原文地址:https://www.cnblogs.com/fdxjava/p/14803068.html
Copyright © 2011-2022 走看看