当前位置: 首页 > 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][…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...