VUE 下拉加载,无限循环--- infinite-loading

还在理解中,简单的先写一下。
思路:
1、安装插件 npm install vue-infinite-loading
2、引入插件 import InfiniteLoading from ‘vue-infinite-loading’
3、注册组件 components:{InfiniteLoading},
4、在结束v-for循环后,进行调用。

<li v-for="(item,uniquekey) in list" :key="uniquekey">
				<div class="img"><img v-lazy="item.thumbnail_pic_s"></div>
				<div class="fl" style="width:65%;">
					<div class="tit">{{item.title}}</div>
					<p>作者:{{item.author_name}}</p>
					<p>来源于:{{item.category}}-{{item.uniquekey}}</p>
				</div>
			</li>

		</ul>

<infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>

5、在data创建 函数

data(){
		return{
      page: 1, 
		      list: [],  //数据列表
		      newsType: 'story',
		      infiniteId: +new Date(),
		}
	},

6、业务逻辑直接上代码了,暂时还并不是很理解。正在寻求学习其他加载方式。像以下这种方式,无限循环加载重复的内容。

methods:{
 infiniteHandler($state) {
      this.$axios
      .get('../static/data/news.json', {
        params: {
          page: this.page,
          tags: this.newsType,
        },
      }).then(({ data }) => {
        if (data.result.data.length) {
          this.page += 1;
          this.list.push(...data.result.data);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
    changeType() {
      this.page = 1;
      this.list = [];
      this.infiniteId += 1;
    },

7、结束

Vue-infinite-loading是一个Vue.js的无限滚动插件,可以用于实现下拉加载数据的功能。它可以与Element UI的分页组件一起使用,以实现更好的用户体验。\[1\] 在使用vue-infinite-loading时,你可以通过设置distance属性来定义距离底部多少距离时触发加载事件。当identifier属性发生变化时,组件会自动重设。你可以在@infinite事件后跟一个方法,该方法可以将获取到的数据与当前的数据列表进行合并。\[3\] 需要注意的是,如果你是直接循环元素,例如使用v-for指令,每次加载完数据后会停留在上一次的浏览记录。而如果是给表格等元素添加数据,则会在底部继续加载,直到数据加载完毕。\[2\] 总结来说,vue-infinite-loading是一个方便实现下拉加载数据功能的插件,可以与Element UI的分页组件一起使用,通过设置distance属性和使用@infinite事件来实现数据的无限滚动加载。\[1\]\[3\] #### 引用[.reference_title] - *1* *3* [vue-infinite-loading的使用方法](https://blog.csdn.net/lalaladamowang/article/details/117956386)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [在vue中表格滚动加载数据的几种方式](https://blog.csdn.net/Coloryi/article/details/109370536)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赖赖赖先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值