当前位置: 首页 > news >正文

vue实现评论滚动效果

vue插件实现滚动效果

一、安装组件

官网地址:https://chenxuan0000.github.io/vue-seamless-scroll/

1、vue2安装

npm install vue-seamless-scroll --save

vue3安装

npm install vue3-seamless-scroll --save

二、组件引入

<template><div v-if="flagList"><vue-seamless-scroll :data="barrageList" class="warp"><ul class="item"><li v-for="(item, index) in barrageList" :key="index"><span class="msg" v-text="item.msg"></span><span class="avatar" v-text="item.avatar"></span></li></ul></vue-seamless-scroll></div>
</template><script>import vueSeamlessScroll from 'vue-seamless-scroll'export default {name: 'Example01Basic',components: {vueSeamlessScroll},data() {return {barrageList: [],flagList: true}},created() {this.getTreeHole();},method: {getTreeHole() {this.$http.get(this.$constant.baseURL + "/webInfo/listTreeHole").then((res) => {if (!this.$common.isEmpty(res.data)) {res.data.forEach(m => {this.barrageList.push({id: m.id,avatar: m.avatar,msg: m.message,time: Math.floor(Math.random() * 5 + 10)});});this.flagList = false;this.$nextTick(() => {this.flagList = true})}}).catch((error) => {this.$message({message: error.message,type: "error"});});}}}
</script><style scoped>.warp {height: 270px;width: 360px;margin: 0 auto;overflow: hidden;}.warp ul {list-style: none;padding: 0;margin: 0 auto;}.warp ul li,.warp ul a {display: block;height: 30px;line-height: 30px;display: flex;justify-content: space-between;font-size: 15px;}
</style>

三、实现效果

在这里插入图片描述
注意: 从服务器获取数据时,由于数据加载原因导致无法滚动的效果,在获取数据时添加nextTick即可解决。

相关文章:

vue实现评论滚动效果

vue插件实现滚动效果 一、安装组件 官网地址&#xff1a;https://chenxuan0000.github.io/vue-seamless-scroll/ 1、vue2安装 npm install vue-seamless-scroll --savevue3安装 npm install vue3-seamless-scroll --save二、组件引入 <template><div v-if"…...

iphone13 不升级IOS使用广电卡

iPhone13的信号&#x1f4f6;&#xff0c;15系统刷高版本iPCC&#xff0c;本帖以后不再更新&#xff01;&#xff01;&#xff01; 自从知道可以通过刷iPCC的方式改善信号(不更新iOS大版本的情况下)&#xff0c;尝试了各种版本。 我自己用下来总结 - 移动联通48、49、50 &…...

网络地址转换

文章目录 1. NAT使用环境2. NAT的优缺点3. NAT的三种类型4. NAT工作原理5. 配置示例6. 常用排错命令 1. NAT使用环境 需要连接到互联网&#xff0c;但主机没有全局唯一的IP地址&#xff1b;更换的ISP的要求对网络进行重新编址&#xff1b;需要合并两个使用相同编址方案的内联网…...

【python】 @property属性详解 and mysql的sqlalchemy的原生sql

【python】 property属性详解 一文搞懂python中常用的装饰器&#xff08;classmethod、property、staticmethod、abstractmethod…&#xff09; sqlalchemy的原生sql from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker# 数据库连接字符串 DATAB…...

西门子WinCC开发笔记(一):winCC西门子组态软件介绍、安装

文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/142060535 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、Op…...

如何在5个步骤中编写更好的ChatGPT提示

ChatGPT是一个风靡全球的生成式人工智能 (AI) 工具。虽然它有可能编造一些东西&#xff0c;但是通过精心设计提示&#xff0c;可以确保获得最佳结果。在这篇文章中&#xff0c;我们将探讨如何做到这一点。 在本文中&#xff0c;我将向你展示如何编写提示&#xff0c;激励驱动C…...

最小堆最大堆

文章目录 最小堆、最大堆最小堆&#xff08;Min-Heap&#xff09;最大堆&#xff08;Max-Heap&#xff09;堆的主要操作及时间复杂度堆的常见应用堆的数组表示大根堆--堆排序 最小堆、最大堆 最小堆&#xff08;Min-Heap&#xff09;和最大堆&#xff08;Max-Heap&#xff09;…...

华为 HCIP-Datacom H12-821 题库 (10)

有需要题库的可以看主页置顶 V群进行学习交流 1.缺省情况下&#xff0c;BGP 对等体邻接关系的保持时间是多少秒&#xff1f; A、120 秒 B、60 秒 C、10 秒 D、180 秒 答案&#xff1a;D 解析&#xff1a; BGP 存活消息每隔 60 秒发一次&#xff0c;保持时间“180 秒” 2.缺省…...

如何利用命令模式实现一个手游后端架构?

命令模式的原理解读 命令模式的英文翻译是 Command Design Pattern。在 GoF 的《设计模式》一书中&#xff0c;它是这么定义的&#xff1a; The command pattern encapsulates a request as an object, thereby letting us parameterize other objects with different reques…...

ThreadLocal 释放的方式有哪些

ThreadLocal基础概念&#xff1a;IT-BLOG-CN ThreadLocal是Java中用于在同一个线程中存储和隔离变量的一种机制。通常情况下&#xff0c;我们使用ThreadLocal来存储线程独有的变量&#xff0c;并在任务完成后通过remove方法清理这些变量&#xff0c;以防止内存泄漏。然而&…...

监控-zabbix

1运维监控 是指对计算机系统、网络、服务器等关键IT基础设施进行实时监控&#xff0c;以确保系统的稳定运行和及时发现潜在问题 2老监控框架&#xff08;不会用但需要知道&#xff09; Cacti&#xff1a; Cacti是一款基于PHP、MySQL开发的网络流量监测图形分析工具。主要监…...

设计模式 解释器模式(Interpreter Pattern)

文章目录 解释器模式简绍解释器模式的结构优缺点UML图具体代码实现Context 数据实体类&#xff0c;可以包含一些方法Abstract Expression 创建接口方法Terminal Expression 对数据简单处理Non-Terminal Expression 同样实现抽象接口方法Client&#xff08;客户端&#xff09; 调…...

Linux echo命令讲解及与重定向符搭配使用方法,tail命令及日志监听方式详解

echo echo具有回声&#xff0c;回响的意思&#xff0c;在linux系统中echo一般可以输出指定字符或用于命令执行 echo命令的用法为 echo 输出字符串 或 echo 命令 若参数为字符串则进行字符串输出&#xff0c;注意若字符串中含空格最好将其用引号括起&#xff0c;防止echo命…...

Linux网络:总结协议拓展

1. TCP/IP四层模型总结 2. 网络协议拓展 DNS协议&#xff08;地址解析协议&#xff09; TCP/IP使用IP地址和端口号来确定网络中一台主机的一个程序。 但是这样标定不方便记忆&#xff0c;于是开始引出主机名&#xff08;字符串&#xff09;&#xff0c;使用hosts文件来描述…...

去除恢复出厂设置中UI文字显示

文章目录 需求场景 一、代码跟踪与分析在线文字搜索RK平台本地源码搜索实际测试验证代码推理 二、实现方案三、延伸知识四、知识总结 需求 需求&#xff1a;去除恢复出厂设置中UI文字显示 场景 Android 相关产品各种方向旋转、强制横竖屏等需求&#xff0c;导致在恢复出厂设…...

《高校教育管理》

《高校教育管理》为中文社会科学引文索引&#xff08;CSSCI&#xff09;来源期刊、北大中文核心期刊、RCCSE中国核心学术期刊、人大“复印报刊资料”重要转载来源期刊&#xff0c;是江苏大学主办&#xff0c;中国高等教育管理研究会协办的全国性高等教育管理专业期刊。 ISSN 1…...

全国计算机二级考试C语言篇4——选择题

运算符与表达式 1.赋值的正确写法 赋值操作是一个很常见的操作&#xff0c;但是赋值操作也有一些需要注意的地方。赋值操作是将一个表达式的值赋给一个变量的过程。在C语言中&#xff0c;赋值操作符是""。结合性从右到左&#xff0c;不控制求值顺序。 下面是几种C语言…...

数据结构————哈希表

哈希表&#xff08;Hash table&#xff09;&#xff0c;也被称为散列表&#xff0c;是一种根据关键值&#xff08;Key value&#xff09;而直接进行访问的数据结构。它通过把关键值映射到表中的一个位置来访问记录&#xff0c;从而加快查找的速度。这个映射函数被称为散列函数或…...

element select + tree

element select tree的使用 <template slot"action1" slot-scope"text, record, index"><el-select v-model"record.tagValue" multiple placeholder"请选择":filter-method"(e) > filterTree(e, index)" filt…...

LeetCode之矩阵

36. 有效的数独 class Solution {// 方法 isValidSudoku 接收一个字符二维数组 board&#xff0c;表示数独棋盘&#xff0c;返回是否有效public boolean isValidSudoku(char[][] board) {// 创建三个二维数组来记录每一行、列和子框中数字的出现次数int[][] rows new int[9][…...

Raspberry Pi Imager:树莓派系统安装的终极解决方案

Raspberry Pi Imager&#xff1a;树莓派系统安装的终极解决方案 【免费下载链接】rpi-imager The home of Raspberry Pi Imager, a user-friendly tool for creating bootable media for Raspberry Pi devices. 项目地址: https://gitcode.com/gh_mirrors/rp/rpi-imager …...

5分钟快速修复Windows更新故障:Reset Windows Update Tool完全指南

5分钟快速修复Windows更新故障&#xff1a;Reset Windows Update Tool完全指南 【免费下载链接】Reset-Windows-Update-Tool Troubleshooting Tool with Windows Updates (Developed in Dev-C). 项目地址: https://gitcode.com/gh_mirrors/re/Reset-Windows-Update-Tool …...

从“认怂”到“被看见”:flomo的产品设计哲学

当大多数笔记软件都在追求“大而全”时&#xff0c;有一款产品选择了一条完全不同的路。它不让你写标题&#xff0c;不支持复杂排版&#xff0c;甚至在官网上大大方方地列出“自己不擅长什么”。它的创始人说&#xff1a;“35岁再创业&#xff0c;我学会了认怂。”它就是flomo&…...

Anthropic 又双叒翻车了:Claude Code源代码打包失误,这已经是第几次了?

今天&#xff08;2026-03-31&#xff09;上午&#xff0c;Anthropic的Claude Code CLI又出大糗了。 安全研究员 Chaofan Shou发现&#xff1a; 他们的 npm 包里多塞了一个 60MB 的 cli.js.map 文件。 结果呢&#xff1f;完整源代码直接公开——1900多个 TypeScript 文件&#x…...

OpenStack Train版三节点部署全攻略:从CentOS 7.6配置到Dashboard上线

OpenStack Train版三节点部署实战&#xff1a;从CentOS 7.6到Dashboard的完整指南 当企业需要构建私有云平台时&#xff0c;OpenStack作为最成熟的开源IaaS解决方案之一&#xff0c;其灵活性和可扩展性备受青睐。本文将带您完成一个生产级的三节点OpenStack Train版部署&#x…...

从噪声到艺术:深入解析扩散模型采样算法的核心步骤

1. 扩散模型&#xff1a;当数学遇见艺术创作 想象一下&#xff0c;你正在看一位画家作画。他一开始只是在画布上随意涂抹颜料&#xff0c;看起来毫无章法。但随着画笔的不断调整&#xff0c;那些混乱的色块逐渐形成了清晰的轮廓&#xff0c;最终变成一幅精美的画作。这正是扩散…...

在Ubuntu 22.04上为Orange Pi 3B编译内核6.6:一份避坑与加速指南

在Ubuntu 22.04上为Orange Pi 3B编译内核6.6&#xff1a;一份避坑与加速指南 1. 环境准备与工具链优化 Orange Pi 3B作为一款基于Rockchip RK3566的开发板&#xff0c;其内核编译过程需要特别注意工具链的选择和环境配置。以下是经过实战验证的优化方案&#xff1a; 必备工具安…...

Wangle客户端开发实战:从零开始构建高效网络应用

Wangle客户端开发实战&#xff1a;从零开始构建高效网络应用 【免费下载链接】wangle Wangle is a framework providing a set of common client/server abstractions for building services in a consistent, modular, and composable way. 项目地址: https://gitcode.com/g…...

2016-2025年地级市链长制数据

在产业链现代化与协同治理进程中&#xff0c;“链长制”作为一项关键的制度创新&#xff0c;为破解产业链条松散、协同不足等问题提供了重要抓手&#xff0c;其政策效果与影响机制成为当前学术研究与政策制定的焦点议题。周钰丁、田思远在研究中指出&#xff0c;产业链“链长制…...

影刀RPA实战:用Python字符串处理提升自动化效率(附5个常用脚本)

影刀RPA实战&#xff1a;5个Python字符串处理脚本解决自动化难题 在影刀RPA的自动化流程中&#xff0c;字符串处理就像流水线上的精密工具&#xff0c;直接决定了数据处理的准确性和效率。当我们需要从混乱的日志中提取关键信息、清洗客户提交的表格数据或转换不同系统的文本格…...