Vue实现无限滚动加载更多内容(懒加载)或实现查看更多按钮

在Vue中实现无限滚动加载更多内容,通常可以使用vue-infinite-loading插件。以下是一个简单的例子:

1、首先,安装vue-infinite-loading:

npm install vue-infinite-loading --save

2、在Vue组件中使用它:

<template><div><ul><li v-for="item in items" :key="item.id">{{ item.content }}</li></ul><infinite-loading @infinite="infiniteHandler"><div slot="no-more">没有更多内容了</div></infinite-loading></div>
</template><script>
import InfiniteLoading from 'vue-infinite-loading';export default {components: {InfiniteLoading,},data() {return {items: [], // 列表内容page: 1, // 当前页数hasMore: true, // 是否还有更多内容};},methods: {// 无限滚动加载的处理函数infiniteHandler($state) {// 模拟异步获取数据setTimeout(() => {if (this.page > 3) {// 模拟没有更多内容了$state.complete();this.hasMore = false;} else {// 模拟获取新的内容const moreItems = []; // 假设这是从服务器获取的新内容this.items = this.items.concat(moreItems);$state.loaded(); // 告诉插件加载完毕this.page++;}}, 1000);},},
};
</script>

在这个例子中,infiniteHandler方法会在组件创建时由infinite-loading触发。当用户滚动到页面底部时,会调用这个方法。在这个方法中,我们模拟了异步获取新内容的过程,并通过 s t a t e . l o a d e d ( ) 通知 i n f i n i t e − l o a d i n g 加载完毕。如果没有更多内容可加载,则通过 state.loaded()通知infinite-loading加载完毕。如果没有更多内容可加载,则通过 state.loaded()通知infiniteloading加载完毕。如果没有更多内容可加载,则通过state.complete()告知插件不再需要加载,并显示slot="no-more"中的内容。

3、实现查看更多按钮

如果是要手动加载的,通过点击更多按钮加载,思路简单点:
标签一样使用v-for遍历。

 <li v-for="item in items" :key="item.id">{{ item.content }}</li>

查看更多按钮

<el-button class="button" type="primary" round @click="loadMore()"  :disabled="isDisabled">查看更多</el-button>

而更多按钮点击事件只需把内容数组与新内容数组进行拼接即可。

		methods:{loadMore(){this.items = this.items.concat(moreItems);}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/32073.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式之策略模式 -- C++】

策略模式 – 算法替换&#xff0c;灵活变化 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一系列算法&#xff0c;并将每一个算法封装起来&#xff0c;使它们可以互相替换。策略模式让算法的变化独立于使用算法的客户。这种模式主…

Android系统 无法绑定1024以下端口问题

一&#xff0c;前言 在Android系统中&#xff0c;默认情况下&#xff0c;普通应用程序无法绑定到1024以下的端口&#xff08;即特权端口&#xff09;&#xff0c;这是出于安全考虑而设计的。这种限制是为了防止普通应用程序伪装成系统服务或者使用系统服务的特权端口&#xff…

kotlin类

一、定义 1、kotlin中使用关键字class 声明类,如果一个类没有类体&#xff0c;也可以省略花括号&#xff0c; 默认为public 类型的&#xff1a; // 这段代码定义了一个公开的、不可被继承的Test类 class Test{} // 没有类体&#xff0c;可以省略花括号 class Test 底层代码&…

2024最新IDEA插件开发+发布全流程 SelectCamelWords[选中驼峰单词](idea源代码)

2024最新IDEA插件开发&#xff08;发布&#xff09;-SelectCamelWords[选中驼峰单词]&#xff08;idea源代码&#xff09; 参考文档 Jetbrains Idea插件开发文档: https://plugins.jetbrains.com/docs/intellij/welcome.html代码地址&#xff1a;https://github.com/yangfeng…

Mybatis框架的缓存

Mybatis框架的缓存 一.为什么使用缓存 缓存(cache&#xff09;的作用是为了减去数据库的压力&#xff0c;提高查询性能。缓存实现的 原理是从数据库中查询出来的对象在使用完后不要销毁&#xff0c;而是存储在内存&#xff08;缓存&#xff09; 中&#xff0c;当再次需要获取…

windows-docker-本地部署-前端

前置条件 docker已有需要打包的文件也已经写好了 打包镜像 ip地址修改 需要根据自身修改的文件 .env.local文件存放你前端访问的端口 172.24.240.1:这部分是自己电脑的ip 如何查看本机ip&#xff0c;使用IPV4的地址。 #本地 #API_HOST_URLhttp://172.24.240.1:8091打包文…

Ubuntu下 Tailscale的安装配置与优化

今天&#xff0c;我在阿贝云的免费云服务器上进行了Tailscale的部署测试。说实话&#xff0c;这家免费云服务器真的不错,配置也算不错(1核CPU、1G内存、10G硬盘、5M带宽)。作为一个完全免费的云服务器,已经满足了我的大部分需求了,真的很感谢阿贝云提供这样一个优质的免费服务!…

Excel导出实例

在上一节的基础上&#xff0c;本文演示下如何导出excel数据。 Excel导出操作演示 继承ocean-easyexcel SDK <dependency><groupId>com.angel.ocean</groupId><artifactId>ocean-easyexcel</artifactId><version>1.0.0</version> …

架构设计 - 网站性能优化之静态资源CDN配置

摘要: web 应用业务缓存通常3级: 一级缓存:JVM 本地缓存 二级缓存:Redis集中式缓存 三级缓存:Nginx Proxy Cache 缓存 或 Nginx Lua 缓存 四级缓存:静态资源CDN缓存 页面静态化 本文主要分享 怎样通过CDN缓存静态资源的方式 提高系统性能和响应速度。 WEB应用通过CD…

【机器学习】正则卷积群理论及Python代码实现

1. 引言 1.1.卷积神经网络CNN 卷积神经网络&#xff08;CNN&#xff09;的数学模型是深度学习中用于处理图像和其他高维数据的关键组成部分。那么&#xff0c;CNN究竟是什么呢&#xff1f; 总结起来&#xff0c;CNN网络主要完成以下操作&#xff1a; 卷积操作&#xff08;Co…

【专业英语 复习】第11章 Databases

1. In the ____ database, data elements are stored in different tables, each of which consists of rows and columns. A. network B. hierarchical C. relational D. object-oriented 正确答案&#xff1a;C 在关系数据库中&#xff0c;数据元素存储在不同的表中&#xff…

无线麦克风一拖二哪个牌子好,揭秘目前音质最好的麦克风

在自媒体的世界里&#xff0c;无线领夹麦克风已经成了一种标准配置&#xff0c;它受到广大视频创作者的青睐。无论是刚刚踏入短视频领域的新手&#xff0c;还是已经拥有丰富经验的资深博主&#xff0c;都深知一款好的领夹麦克风对于提升视频音频质量的重要性。它不仅能帮助创作…

帆软FCA-FineReport入门考试

Part.1&#xff1a;判断题 &#xff08;总分&#xff1a;56分 得分&#xff1a;42&#xff09; 第1题 判断题 进行决策系统平台目录管理时&#xff0c;链接的地址可以选择使用相对路径或绝对路径(得分&#xff1a;2分 满分&#xff1a;2分) 正确答案&#xff1a;A 你的答案&am…

SQLCMD完全指南:掌控 SQL Server

SQL Server 拥有被广泛认可的一流管理工具——SQL Server Management Studio&#xff08;简称 SSMS&#xff09;。它提供了丰富的功能&#xff0c;极大地简化了开发人员和数据库管理员&#xff08;DBA&#xff09;的工作。 目录 SQLCMD 入门使用 SQLCMD 连接 SQL ServerSQLCMD …

Java和C语言中基础概念中的区别有哪些?

Java和C语言中基础概念中的区别有哪些&#xff1f; 标识符数据类型运算符加号%号& 和 | 关系表达式函数声明代码规范数组 以下是Java和C语言在一些基础概念中的区别&#xff08;不包含面向对象等的高级知识&#xff09; 标识符 在Java中&#xff0c;标识符可以由数字、字母…

【Java】字节数组 pcm 与 wav 格式互转(附原理概述)

前言 最近实现了一个文字转语音的功能&#xff0c;语音引擎返回的是pcm格式的数据。需要转化成wav格式前端才能播放。本文首先会给出解决方案&#xff0c;后续会讲背后的原理。 场景 1. pcm wav 转化工具类 入参和出参都为byte[]&#xff0c;理论上有了 byte[] 就可以输出…

基于单片机的智能窗户控制系统的设计

摘 要&#xff1a; 根据单片机技术和现代传感器技术 &#xff0c; 本文主要针对基于单片机的智能窗户控制系统的设计进行探讨 &#xff0c; 仅供参考 。 关键词&#xff1a; 单片机 &#xff1b; 智能窗户 &#xff1b; 控制系统 &#xff1b; 设计 在现代科学技术持续发展的带…

面完小红书算法岗,心态崩了。。。

暑期实习基本结束了&#xff0c;校招即将开启。 不同以往的是&#xff0c;当前职场环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;HC 在变少&#xff0c;岗位要求还更高了。提前准备才是完全之策。 最近&#xff0c;我们又陆续整理了很多大厂的面试题&#xff0c…

Python爬虫基础以及示例讲解

爬虫简介 网络爬虫 爬虫指在使用程序模拟浏览器向服务端发出网络请求&#xff0c;以便获取服务端返回的内容。 但这些内容可能涉及到一些机密信息&#xff0c;所以爬虫领域目前来讲是属于灰色领域&#xff0c;切勿违法犯罪。 爬虫本身作为一门技术没有任何问题&#xff0c;关…

Docker之overlay2的迁移

原因 docker默认将文件及其容器放置在了系统盘的挂载区内&#xff0c;如果长期使用会发现系统挂载区被overlay2挤爆了,因此在一开始我们将其迁移在大容量外挂磁盘上,就可以避免系统盘被挤爆,放心使用. 具体操作 # 停止容器 systemctl stop docker# 修改容器配置&#xff0c…