使用Element的 InfiniteScroll 无限滚动组件报错

一、问题描述

在使用ElementInfiniteScroll 无限滚动时候出现以下错误:

TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'
在这里插入图片描述
InfiniteScroll的更多用法element官网

二、解决办法

给需要使用 InfiniteScroll 的元素或者它的父级元素加上 overflow:auto; 属性即可。

<template>
  <div class="home">
        <div v-infinite-scroll="loadMore" v-for="i in count" class="infinite-list" :key="i">{{ i+1 }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count:5
    }
  },
  methods: {
    loadMore() {
      //  this.count+=1;
      console.log('加载...')    
    }
  }
};
</script>
<style lang="scss">
.home {
  .infinite-list{
    width: 500px;
    height: 40px;
    line-height: 40px;
    background: lightblue;
    margin:10px;
    overflow:auto; // 加上该属性即可。由浏览器定夺,如果内容被修剪,浏览器就会显示滚动条以便查看其余内容
  }
}
</style>

三、注意事项

InfiniteScroll 无限滚动组件, 滚动至底部时,加载更多数据。据官网描述其基础用法:

给实现滚动加载的元素(会出现滚动条的元素)添加 v-infinite-scroll属性,属性值是相应的加载方法名,如loadMore,即可实现滚动到底部时触发该loadMore 方法

注意属性和css样式的设置:

  1. 给设置了 v-infinite-scroll的元素或者其父元素设置高度如 height:200px;,并让其超出高度显示滚动条 overflow:auto;
  2. infinite-scroll-disabled="disabled",这里的 disabledcomputed 里面的属性,利用其控制是否继续加载。当disabled为true的时候,该加载函数 loadMore 函数将不再被触发。
  3. infinite-scroll-immediate 默认为 true, 即 立即执行加载方法 loadMore,以防初始状态下内容无法撑满容器。即loadMore会先执行一次,这里设置false,是让其初始不执行,等滚动到底部时,再执行该 loadMore 方法。
<template>
	<div class="infinite-list-wrapper">
          <ul class="list"  v-infinite-scroll="loadMore"  infinite-scroll-disabled="disabled"  infinite-scroll-immediate="false">
            <li v-for="i in count" class="list-item" :key="i">{{ i }}</li>
          </ul>
          <p v-if="loading">加载中...</p>
          <p v-if="noMore">没有更多了</p>
        </div>
</template>
<script>
export default {
  data() {
    return {
      count:5,
      loading: false
    };
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  methods: {
    loadMore() {
      console.log("加载...")
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    }
  }
};
</script>
<style lang="scss">
.home {
  .infinite-list-wrapper{
	    height:200px; // 1. 指定高度
	    overflow: auto; // 2. 内容超过指定高度 出现滚动条
	    width: 500px;
	    border:1px solid green;
	    margin-top:120px;
	    .list-item{
		      background: lightblue;
		      margin:10px;
		      height:30px;
		      line-height: 30px;
	   }
 }
}
</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
InfiniteScrollElement 组件库中的一个组件,它可以实现在滚动到页面底部时自动加载更多数据的功能,常用于展示长列表或分页数据。 在 Vue 实例中使用 InfiniteScroll 组件,需要先在组件中引入它: ```js import { InfiniteScroll } from 'element-ui'; export default { directives: { InfiniteScroll }, // ... } ``` 然后,将 InfiniteScroll 组件作为一个自定义指令绑定到需要实现无限滚动的元素上。例如,将其绑定到一个包含数据列表的 `ul` 元素上: ```html <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <li v-for="item in list" :key="item.id">{{ item.text }}</li> </ul> ``` 在这个例子中,`v-infinite-scroll` 指令绑定了一个名为 `loadMore` 的方法,它会在滚动到页面底部时被触发,用于加载更多数据。`infinite-scroll-disabled` 属性指定了一个布尔值,用于控制是否禁用无限滚动功能。`infinite-scroll-distance` 属性指定了一个数字,表示滚动到页面底部的距离阈值,当滚动距离小于该值时,不触发 `loadMore` 方法。 最后,在 Vue 实例中定义 `loadMore` 方法,用于加载更多数据。例如,可以在该方法中向服务器发送 AJAX 请求,获取更多数据并将其添加到数据列表中: ```js export default { directives: { InfiniteScroll }, data() { return { list: [], // 数据列表 loading: false, // 是否正在加载数据 page: 1, // 当前页码 pageSize: 10, // 每页数据量 }; }, methods: { async loadMore() { if (this.loading) return; // 如果正在加载数据,则不执行 this.loading = true; // 标记为正在加载数据 try { const res = await axios.get('/api/data', { params: { page: this.page + 1, pageSize: this.pageSize, }, }); this.list.push(...res.data); // 将新数据添加到列表中 this.page += 1; // 更新页码 } catch (err) { console.error(err); } this.loading = false; // 标记为加载数据完成 }, }, }; ``` 这样,当用户滚动到页面底部时,就会触发 `loadMore` 方法,从服务器获取更多数据并将其添加到列表中,实现无限滚动的效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值