vue2.0滚动加载组件

vue2.0滚动加载组件

  • 一、直接上代码

需求:刚开始用的element-ui的滚动加载组件,个别电脑会在滚动加载没到底就停止了,怀疑是有bug,就自己写了一个

一、直接上代码

<div class="threadListAttach" ref="replyscrollDom"><div class="threadContent" ></div>
</div>//触底加载
flagContent: false,
scrollPosition: 0, // 滚动位置
throttled: false,
pageNum: 1,watch: {// 滚动加载scrollPosition(newPosition) {if (!this.throttled) {this.throttled = true;if (newPosition + this.$refs.replyscrollDom.clientHeight + 50 >this.$refs.replyscrollDom.scrollHeight &&this.flagContent) {this.pageNum++;//重新请求下一列  }setTimeout(() => {this.throttled = false;}, 200);}},
},setTimeout(() => {this.scrollPosition = 0;this.$nextTick(() => {// 监听滚动位置const container = document.querySelector('.threadListAttach');container.addEventListener('scroll', () => {this.scrollPosition = container.scrollTop;});});
}, 300);.threadListAttach {width: 500px;max-height: 400px;overflow: auto;
}

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

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

相关文章

git cloen的错误

~ % git clone https://github.com/xxx/core.git Cloning into core... error: RPC failed; curl 56 Recv failure: Operation timed out error: 56 bytes of body are still expected fatal: expected flush after ref listing看起来在克隆仓库时仍然遇到了问题。错误信息显示…

【软件设计师】算法

1、算法的效率 时间复杂度:程序从开始到结束所需要的时间 空间复杂度&#xff1a;算法在运行过程中临时占用存储空间大小的度量 时间渐近复杂度&#xff1a;时间复杂度由最高次幂决定(判断大小技巧&#xff1a;将n10代入&#xff09; O(log2 n):二分查找法 O(n&#xff09;:for…

MySql8.0.25部署MGR集群

1 准备mysql单机实例 当前部署的mysql使用8.0.25&#xff0c;使用传统的方式初始化data目录&#xff0c;启动服务等。 --初始化&#xff0c;start.conf会放在当前文档目录中 ./mysqld --defaults-file/mgr/start.conf --explicit_defaults_for_timestamp --initialize-insecur…

家政预约小程序07服务分类展示

目录 1 创建服务分类页面2 侧边栏选项卡配置3 配置数据列表4 从首页跳转到分类页总结 上一篇我们开发了首页的服务展示功能&#xff0c;本篇我们讲解一下服务分类功能的开发。在小程序中通常在底部导航栏有一个菜单可以展示所有服务&#xff0c;侧边选项卡可以展示分类信息&…

Python零基础一天丝滑入门教程(非常详细)

目录 第1章 初识python 第1节 python介绍 1.为什么要学习Python&#xff1f; 2.python排名 3.python起源 4.python 的设计目标 第2节 软件安装 第2章 快速上手&#xff1a;基础知识 第1节 Python3 基础语法 Python 变量 字面量 数据类型转换 Python3 注释 数据类…

人工智能核心技术:机器学习总览

&#x1f4a1;机器学习作为人工智能的核心&#xff0c;与计算机视觉、自然语言处理、语音处理和知识图谱密切关联 &#x1f4a1;【机器学习】是实现人工智能的核心方法&#xff0c;专门研究计算机如何模拟/实现生物体的学习行为&#xff0c;获取新的知识技能&#xff0c;利用经…

垂类短视频:四川鑫悦里文化传媒有限公司

垂类短视频&#xff1a;内容细分下的新媒体力量 随着移动互联网的迅猛发展和智能手机的普及&#xff0c;短视频已成为当下最受欢迎的媒介形式之一。四川鑫悦里文化传媒有限公司而在短视频领域&#xff0c;一个新兴的概念——“垂类短视频”正逐渐崭露头角&#xff0c;以其独特…

设计模式 21 备忘录模式 Memento Pattern

设计模式 21 备忘录模式 Memento Pattern 1.定义 备忘录模式是一种行为型设计模式&#xff0c;它允许你将一个对象的状态保存到一个独立的“备忘录”对象中&#xff0c;并在之后恢复到该状态。 2.内涵 主要用于以下场景&#xff1a; 需要保存对象状态以备恢复&#xff1a; 当…

torch.matmul()的用法

这篇文章记录torch.matmul()的用法 这里仿照官方文档中的例子说明&#xff0c;此处取整数随机数&#xff0c;用于直观的查看效果&#xff1a; vector x vector 两个一维向量的matmul相当于点积&#xff0c;得到一个标量 tensor1 torch.randint(1, 6, (3,)) tensor2 torch.…

机器学习基础笔记

周志华老师的机器学习初步的笔记 绪论 知识分类 科学 是什么&#xff0c;为什么 技术 怎么做 工程 多快好省 应用 口诀&#xff0c;技巧&#xff0c;实际复杂环境&#xff0c;行行出状元 定义 经典定义 利用经验改善系统自身的性能 训练数据 模型 学习算法 分类 决策树…

Django5+React18前后端分离开发实战14 React-Router6 入门教程

使用nodejs18 首先&#xff0c;将nodejs切换到18版本&#xff1a; nvm use 18创建项目 npm create vitelatest zdpreact_basic_router_dev -- --template react cd zdpreact_basic_router_dev npm install react-router-dom localforage match-sorter sort-by npm run dev此…

nlohmann json C++ 解析

学习材料&#xff1a;nlohmann json json官方 源码解析 源码 要学习并理解这份代码&#xff0c;可以按照以下步骤进行&#xff0c;逐步梳理代码的逻辑&#xff1a; 基本步骤&#xff1a; 配置宏: 理解用于配置的宏定义&#xff0c;这些宏控制库的不同特性和行为。例如&…

Java-常见面试题收集(十五)

二十四 Elasticsearch 1 Elasticsearch 的倒排索引 传统的检索方式是通过文章&#xff0c;逐个遍历找到对应关键词的位置。 倒排索引&#xff0c;是通过分词策略&#xff0c;形成了词和文章的映射关系表&#xff0c;也称倒排表&#xff0c;这种词典 映射表即为倒排索引。 其中…

印度政策变革下,中国跨国企业如何应对?一家高科技企业的数据本地化之路

自2001年底印度加入世贸组织以来&#xff0c;印度政府一直积极采取措施促进经济的发展&#xff0c;推出相关政策吸引外资并调整产业结构&#xff0c;以推动经济实现跨越式增长。外资纷纷涌入印度&#xff0c;在各地建立大规模的企业&#xff0c;促使印度成为全球工厂之一&#…

回答网友问题:在C# 中调用非托管DLL

在一个QQ群里&#xff0c;有人在问如何“在C# 中调用非托管DLL”。 俺脑子抽抽了一下&#xff0c;就回了一句“你喜欢用那种声明方式&#xff0c;就用那种方式去调用。” 然后就有人说&#xff1a;“参数声明要和DLL的声明完全一致”。 俺脑子又抽抽了一下&#xff0c;又回了…

图论中的两种递推计数法

递推计数法 生成树计数&#xff1a; τ ( G ) τ ( G − e ) τ ( G ⋅ e ) \tau(G) \tau(G-e)\tau(G\cdot e) τ(G)τ(G−e)τ(G⋅e) G的生成树的颗数&#xff0c;可以分为两类&#xff1a;包含边e的为 τ ( G ⋅ e ) \tau(G\cdot e) τ(G⋅e)&#xff0c;不包含边e的为 …

kafka跨地区跨集群同步工具MirrorMaker2 —— 筑梦之路

MM2简介 KIP-382: MirrorMaker 2.0 - Apache Kafka - Apache Software Foundation 有四种运行MM2的方法&#xff1a; As a dedicated MirrorMaker cluster.&#xff08;作为专用的MirrorMaker群集&#xff09; As a Connector in a distributed Connect cluster.&#xff08…

每日一练 - 揭秘高级ACL的奥秘

01 真题题目 以下关于高级 ACL 描述正确的是&#xff1a; A.高级 ACL 支持基于协议类型过滤报文 B.可以过滤的协议号的取值可以是 1-255 C.编号范围 3000-3999 D.可以定义生效时间 E.可以根据 MAC 地址过滤报文 02 真题答案 ABCD 03 答案解析 A. 正确&#xff1a;高级ACL的…

使用IDEA远程debug调试

文章目录 应用背景开启方式IDEA设置启动脚本改造 参考资料 应用背景 springboot项目&#xff0c;部署到服务器上&#xff0c;需要开启远程debug跟踪代码。 使用idea开启远程debug。 开启方式 IDEA设置 选择 Edit Configuration 如图&#xff0c;点击加号&#xff0c;选择Re…

【机器学习】利用机器学习优化陆军战术决策与战场态势感知

&#x1f512;文章目录&#xff1a; &#x1f4a5;1.引言 &#x1f6f4;2.机器学习在陆军战术决策中的应用 &#x1f6e3;️2.1数据收集与预处理 &#x1f304;2.2模型构建与训练&#xff1a; &#x1f305;2.3实时决策支持&#xff1a; &#x1f305;2.4代码实现 &…