项目场景：

在无限加载数据时，又不想把所有的数据加载完成，借助分页的思想将数据加载出来

问题描述及解决方案，案例

1.load被无限加载

原因：和html的标签样式有关，如果初始时加载的数据高度没有填充满完当前的html元素的最小高度，load方法就会一直执行

解决方案：调整元素的高度,比如初始时只想加载两条数据，两条数据的占元素高度为50px，则初始时的高度要小于等于50px

2.数据快加载完成时，load方法不调用了，导致后面的数据不显示，我是使用该组件的一个属性 infinite-scroll-distance设置为10，也可以设置成其他值

3简单的案例使用：基于vue的，使用之前需要引入这个插件，或者把element-ui全局引入到vue的main.js
<template><div><div class="myDeviceWrap"><divclass="scrollview"style="overflow: auto"><divclass="deviceTable"v-infinite-scroll="load"infinite-scroll-throttle-delay="500"infinite-scroll-disabled="disabled"immediate-check="false"infinite-scroll-distance="10"><div class="liDemo" v-for="item in count" :key="item"><div style="margin:10px;background:blue;height:33vh">{{item}}</div> </div></div><p v-if="loading">加载中...</p><p v-if="noMore">没有更多了</p></div></div></div></template><script>export default {data () {return {count: 0,loading: false}},computed: {noMore () {return this.count >= 20},disabled () {return this.loading || this.noMore}},methods: {load () {// console.log('131321');// this.loading = true// this.count += 2this.loading = truesetTimeout(() => {this.count += 2this.loading = false}, 2000)}}}
</script><style lang="scss"  scoped>
.myDeviceWrap{width: 100%;height: 76.4vh;
}
.scrollview{width: 100%;height: 76.4vh;
}
.deviceTable {width: 100%;display: flex;font-size: 16px;flex-wrap: wrap;
}
.liDemo{padding: 20px;width: calc(100% / 2);
}</style>  
4.与后端进行交互，实现分页实现无限加载功能部分js代码
 load() {//loading是控制正在加载中...显示this.loading = true;setTimeout(() => {if (this.currentPage <= this.pages) {//this.currentPage表示当前页数,初始值为1， // this.pages后端返回的总页数this.fetchData();//调用后端接口的方法} else {}}, 1000);},//fetchData(){axios.get(url).then(res=>{this.total = res.result.total;this.pages = res.result.pages;this.tableData = this.tableData.concat(res.result.list);//主要代码this.loading = false;this.currentPage++;//主要代码
)
}

InfiniteScroll 无限滚动组件的使用相关推荐

解决Element的 InfiniteScroll 无限滚动组件报错
问题: 使用Element的 InfiniteScroll 无限滚动组件,代码正常,但是控制台还是会有报错: vue.esm.js?efeb:628 [Vue warn]: Error in dire ...
使用Element的 InfiniteScroll 无限滚动组件报错
一.问题描述在使用Element的InfiniteScroll 无限滚动时候出现以下错误: TypeError: Failed to execute 'observe' on 'MutationOb ...
【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效的解决方案
ElementUI 官网 InfiniteScroll 使用:https://element.eleme.cn/#/zh-CN/component/infiniteScroll 首先先叙述一下需求,说 ...
Infinite-Scroll无限滚动加载数据
无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标签: <div id="content& ...
Element UI - v-infinite-scroll无限滚动组件
一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法2.infinite-scroll- ...
InfiniteScroll 无限滚动遇到的坑
InfiniteScroll 无限滚动这玩意遇到的坑解决 [Vue warn]: Error in directive infinite-scroll inserted hook: "Ty ...
antd-mobile InfiniteScroll 无限滚动
需求背景:做一个分页的无限滚动,第一次用这个ui库,也算是吃了点苦头,好记性不如烂笔头记录一下- 框架使用:react + hooks; 注意点:: 如果带有搜索功能尽量不使用useeffct的副作用 ...
vue-infinite-scroll无限滚动组件
该组件主要用于滚动到底部后自动触发v-infinite-scroll绑定的方法,通过该方法来请求新数据然后渲染页面,实现无限滚动的效果.如果是element-plus 的项目,可以直接使用v-infi ...
php jsonp实例 mip无限滚动组件接口注意事项
在改造mip的过程中,很多同学遇到这样一个问题.mip无限滚动问题异步请求数据接口(仅支持 JSONP 请求) 异步请求接口需要规范 callback 为 'callback' 那么什么是JSONP ...

InfiniteScroll 无限滚动组件的使用

项目场景：

问题描述及解决方案，案例

InfiniteScroll 无限滚动组件的使用相关推荐

最新文章

热门文章