vue-infinite-loading

安装

npm install vue-infinite-loading --save

基本使用（不分页）

<template><div><div class="article-main" v-for="(item,index) in blogList" :key="index">{{item.title}}{{item.description}}</div><!--infinite-loading这个组件要放在列表的底部，滚动的盒子里面--><infinite-loadingspinner="spiral"@infinite="infiniteHandler":distance="200"class="infinite-loading-wrap"><div slot="spinner">Loading...</div><div slot="no-more">No more Data</div><div slot="no-results">No results Data</div><div slot="error" slot-scope="{ trigger }">Error Data, click <a href="javascript:;" @click="trigger">here</a> toretry</div></infinite-loading></div>
</template><script> // 引入import InfiniteLoading from 'vue-infinite-loading'export default {name: "",data(){return{blogList:[],}},components: {InfiniteLoading},methods:{infiniteHandler($state) {this.$axios.get("请求地址").then((res) => {if(res.data.data.length) {let arr = res.data.data;// this.blogList = this.blogList.concat(res.data.data);this.blogList = [...this.blogList,...arr]console.log(this.blogList)$state.loaded();}else {$state.complete();}})},}}
</script>

tips： 如果发现每次加载的数据都是相同的，可以问问后端。我就是加载的数据一直是相同的，然后自己弄了很久，后面发现是后端要设置一些东西，裂开。

分页

<template><div><div class="article-main" v-for="(item,index) in blogList" :key="index">{{item.title}}{{item.description}}</div><!--infinite-loading这个组件要放在列表的底部，滚动的盒子里面--><infinite-loadingspinner="spiral"@infinite="infiniteHandler":distance="200"class="infinite-loading-wrap"><div slot="spinner">Loading...</div><div slot="no-more">No more Data</div><div slot="no-results">No results Data</div><div slot="error" slot-scope="{ trigger }">Error Data, click <a href="javascript:;" @click="trigger">here</a> toretry</div></infinite-loading></div>
</template><script> // 引入import InfiniteLoading from 'vue-infinite-loading'export default {name: "",data(){return{page:1,blogList:[],}},components: {InfiniteLoading},methods:{infiniteHandler($state) {this.$axios.get("请求地址?page="+this.page).then((res) => {if(res.data.data.length) {this.page +=1;  // 下一页let arr = res.data.data;// this.blogList = this.blogList.concat(res.data.data);this.blogList = [...this.blogList,...arr]console.log(this.blogList)$state.loaded();}else {$state.complete();}})},}}
</script>

【Vue】实现上拉加载更多数据（利用vue-infinite-loading）相关推荐

微信小程序如何实现上拉加载更多数据?
思路:在下拉到页面的时候我们可以进行数据请求,请求到在上次加载完毕的后五条数据 (举个例子),通过page(页码),count(加载数据得条数)与start进行联接,我们可以发现:start:(pag ...
uniapp微信小程序uni-load-more上拉加载更多数据
1.引入uni-app中uni-load-more.vue到自己的项目 import uniLoadMore from '@/components/uni-load-more/uni-load-mor ...
Flutter下拉刷新，上拉加载更多数据
下拉刷新很简单,直接使用 RefreshIndicator 组件, onRefresh 为重新获取数据的方法 Widget build(BuildContext context) {return S ...
小程序上拉加载更多数据，分类切换状态等实例
发现很多人对小程序的文章比较好奇,购物车那篇居然占了快三分一的访问量,因此写多篇关于小程序的常用功能. 上拉加载更多其实很简单,关键点只是知道上拉加载是变相的分页加载,然后通过初始化记录值和通过数组来 ...
小程序上拉加载更多数据
本人也是新手进行刚刚接触小程序然后需要一个上拉加载数据的代码,百度看了一下自己做出一点总结希望可以帮助跟我一样入坑的新手首先是页面.wxml代码  <pa ...
小程序（上拉加载更多数据）
小程序部分首先设置三个用到的初始值:page数据当前页数.limit当前页面几条数据.hasMoreData上拉时是否继续请求数据,即是否还有更多数据,别的就可以参考下面的代码了小程序代码 // ...
微信小程序上拉加载更多数据
data: {curpage: 1,list: null }, onLoad: function() {wx.showLoading();var _this = this;/**初始化list*/_t ...
微信小程序实现上拉加载更多数据（分页加载）
前言: 该实例和我其他两篇文章息息相关,不清楚的可以先做功课 Vant Weapp小程序 UI 组件库 https://blog.csdn.net/qq_36303853/article/detail ...
Android RecyclerView封装下拉刷新与上拉加载更多
1 scanlistlibrary 基础组件说明(基于 RecyclerView的封装) 基本数据列表(支持下拉刷新与上拉加载更多) 九宫格数据显示封装(支持下拉刷新与上拉加载更多) 瀑布流数据显示封 ...

【Vue】实现上拉加载更多数据（利用vue-infinite-loading）

vue-infinite-loading

安装

基本使用（不分页）

分页

【Vue】实现上拉加载更多数据（利用vue-infinite-loading）相关推荐

最新文章

热门文章