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

supermall项目上拉加载bug分析

news 文章来源：https://blog.csdn.net/m0_71299382/article/details/143228978 2025/1/13 17:44:10

1.bug分析

bug出现的过程是这样的：better-scroll框架会计算滚动内容的高度(通过BScroll对象的scrollerHeight属性记录滚动内容的高度) 由于内容中的图片资源还未加载成功 就已经完成计算 导致计算结果错误 而计算之后 图片资源随之加载完成 这时候better-scroll框架又不会再次更新 因此最终的滚动内容高度只能是不准确的 从而导致我们再滑动过程中不能够滚动到当前页码的末尾

2.问题解决

如果想要正确得到最终的滚动内容高度 我们就需要再每一次图片加载完毕之后进行一次better-scroll刷新 即BScroll.refresh() 刷新操作可以用于更新滚动内容的计算值
但是图片加载的时机如何监听 如果通过原生js的话 利用的是image.onload = function(){} 而如果是通过vue监听图片加载的时机的话 是利用@load完成的

问题是 GoodsItem属于Goods的子组件 而Goods和Scroll属于Home的子组件 在Home组件中 可以通过父访问子(即ref)的方式获取Scroll组件中的BScroll对象 从而调用他的refresh方法 但该方法的调用必须要在每一张图片加载完毕之时才进行 暴力的做法是通过子传父的方式一层层将GoodsItem中的自定义方法往上传递 直到传递给Home为止 如果层级较深的话 那么这种方式显然不合适 因此的话 我们需要通过设计一个中间层来作为Home组件和GoodsItem组件通信的桥梁

这个桥梁的选择采用事件总线最为合适 因为他是专门用于共享事件 你可以将GoodsItem中图片加载函数中的自定义事件发送给事件总线 由Home组件监听事件总线中由GoodsItem发送而来的事件 从而决定是否刷新better-scroll记录的滚动内容高度

3.事件总线

由于我们需要通过事件总线完成对事件的发送和监听操作 因此的话 我们可以通过$bus处理这些相关操作 但是默认$bus为空 我们需要做到该关键字在所有组件中共享 利用Vue的原型就可以实现共享 并且$bus赋值为Vue实例

相关文章：

supermall项目上拉加载bug分析

1.bug分析 bug出现的过程是这样的：better-scroll框架会计算滚动内容的高度(通过BScroll对象的scrollerHeight属性记录滚动内容的高度) 由于内容中的图片资源还未加载成功 就已经完成计算 导致计算结果错误 而计算之后 图片资源随之加载完成 这时候better-scroll框架…...

编程日记 2024/10/30 6:02:43

【linux网络编程】| socket套接字 | 实现UDP协议聊天室

前言：本节内容将带友友们实现一个UDP协议的聊天室。 主要原理是客户端发送数据给服务端。 服务端将数据再转发给所有链接服务端的客户端。 所以， 我们主要就是要实现客户端以及服务端的逻辑代码。 那么， 接下来开始我们的学习吧。 ps:本节内容…...

编程日记 2024/10/30 6:01:42

第二届开放原子大赛-开源工业软件算法集成大赛即将启动！

第二届开放原子大赛-开源工业软件算法集成大赛作为开放原子开源基金会组织举办的开源技术领域专业赛事，聚焦开源底座框架平台建设，通过组件化集成的开发模式，丰富平台功能模块，拓展其应用场景，以此促进工业软件生态的繁…...

编程日记 2024/10/30 5:59:36

PXC集群（Percona XtraDB Cluster ）

一、简介 基于Galera Cluster技术的开源分布式数据库解决方案，它允许你在多个MySQL服务器之间创建一个同步的多主复制集群。 特点： * 多主复制架构: PXC集群支持多主复制，每个节点都可以同时读写数据，这使得应用程序可以更灵活地进行负载均衡和高可用性设置。* 同步复制:…...

编程日记 2024/10/30 5:58:35

分布式光伏是什么意思？如何高效管理？

分布式光伏系统是指在用户现场或靠近用电现场配置较小的光伏发电供电系统，以满足特定用户的需求。根据通知，分布式光伏系统主要有以下几类定义： 10kV以下电压等级接入，且单个并网点总装机容量不超过6MW的分布式电源：这…...

编程日记 2024/10/30 5:56:34

提问GPT

1 理解GPT AI模型即采用深度学习技术的人工神经网络。 你不会被AI取代，而是会被熟练运用AI的人取代 1.1 问答或对话是普通用户与这一轮新ＡＩ产品的典型交互方式。 GPT生成式预训练转换器 了解当前GPT产品的形式： 通用聊天机器人…...

编程日记 2024/10/30 5:55:33

李飞飞团队新突破：低成本高泛化机器人训练法，零样本迁移成功率90%！

在机器人训练中，如何高效地利用模拟环境一直是研究者们关注的重点问题。 近日，美国斯坦福大学李飞飞教授团队提出了一种突破性的“数字表亲”（digital cousins）概念。这一创新方法既保留了数字孪生的优势，又大大降低了…...

编程日记 2024/10/30 5:54:32

PHP内存马：不死马

内存马概念 内存马是无文件攻击的一种常用手段，利用中间件的进程执行某些恶意代码。首先要讲的是PHP不死马，实质上就是直接用代码弄一个死循环，强占一个 PHP 进程，并不间断的写一个PHP shell，或者执行一段代码。 不死…...

编程日记 2024/10/30 5:53:31

【python】OpenCV—Connected Components

文章目录 1、任务描述2、代码实现3、完整代码4、结果展示5、涉及到的库函数6、参考 1、任务描述 基于 python opencv 的连通分量标记和分析函数，分割车牌中的数字、号码、分隔符 cv2.connectedComponentscv2.connectedComponentsWithStatscv2.connectedComponents…...

编程日记 2024/10/30 5:51:29

【优选算法篇】前缀之序，后缀之章：于数列深处邂逅算法的光与影

文章目录 C 前缀和详解：基础题解与思维分析前言第一章：前缀和基础应用1.1 一维前缀和模板题解法（前缀和）图解分析C代码实现易错点提示代码解读题目解析总结 1.2 二维前缀和模板题解法（二维前缀和）图解分析C…...

编程日记 2024/10/30 5:50:28

win10 更新npm 和 node

win10 更新npm 和 node win10 更新 npm winR 输入cmd，打开命令行，并输入如下 # 查看当前npm版本 npm -v # 清缓存 npm cache clean --force # 强制更新npm，试过npm update -g，没起作用，版本没变化 npm install -g …...

编程日记 2024/10/30 5:48:25

搜索引擎算法更新对网站优化的影响与应对策略

内容概要 随着互联网的不断发展，搜索引擎算法也在不断地进行更新和优化。了解这些算法更新的背景与意义，对于网站管理者和优化人员而言，具有重要的指导意义。不仅因为算法更新可能影响到网站的排名，还因为这些变化也可能为网站带…...

编程日记 2024/10/30 5:47:24

使用 Q3D 计算芯片引线的 AC 和 DC R 和 L

摘要： 模具经常用于电子行业。了解其导联的寄生特性对于设计人员来说很重要。Q3D 是计算 RLCG 的完美工具。它可用于高速板或低频电力电子设备。 在下面的视频中，我们展示了如何修改几何结构、设置模型和检查结果。 详细信息： 几何图形可以在 Q3D 中创建，也可以作为不同…...

编程日记 2024/10/30 5:46:23

前端_008_Vite

文章目录 Vite项目结构依赖构建插件 官网：https://vitejs.cn/vite3-cn/guide/ 一句话简介：前端的一个构建工具 Vite项目结构 index.html package.json vite.config.js public目录 src目录 #新建一个vite项目 npm create vitelatest原有项目引入vite需要…...

编程日记 2024/10/30 5:45:22

ssm007亚盛汽车配件销售业绩管理统(论文+源码)_kaic

本科毕业设计论文 题目：亚盛汽车配件销售业绩管理系统设计与实现 系 别： XX系（全称） 专 业： 软件工程 班 级： 软件工程15201 学生姓名： 学生学号： 指导教师&am…...

编程日记 2024/10/30 5:43:20

如何使用python完成时间序列的数据分析？

引言 时间序列分析是统计学和数据分析中的一个重要领域，广泛应用于经济学、金融、气象学、工程等多个领域。 时间序列数据是按时间顺序排列的一系列数据点，通常用于分析数据随时间的变化趋势。 本文将介绍时间序列分析的基本概念、常用方法以及如何使用Python进行时间序列…...

编程日记 2024/10/30 5:42:18

数字ic设计，Windows/Linux系统，其他相关领域，软件安装包（matlab、vivado、modelsim。。。）

目录 一、总述 二、软件列表 1、modelsim_10.6c 2、notepad 3、matlab 4、Visio-Pro-2016 5、Vivado2018 6、VMware15 7、EndNote X9.3.1 8、Quartus 9、pycharm 10、CentOS7-64bit 一、总述 过往发了很多数字ic设计领域相关的内容，反响也很好。 最近…...

编程日记 2024/10/30 5:40:17

SD-WAN分布式组网：构建高效、灵活的企业网络架构

随着企业数字化转型的深入，分布式组网逐渐成为企业网络架构中的核心需求。无论是跨区域的分支机构互联，还是企业与云服务的连接，如何在不同区域实现高效、低延迟的网络传输，已成为业务成功的关键。SD-WAN（软件定义广域…...

编程日记 2024/10/30 5:39:16

Task :prepareKotlinBuildScriptModel UP-TO-DATE，编译卡在这里不动或报错

这里写自定义目录标题 原因方案其他思路 原因 一般来说，当编译到这个task之后，后续是要进行一些资源的下载的，如果你卡在这边不动的话，很有可能就是你的IDE目前没有办法进行下载。 方案 开关一下IDE内部的代理，或者…...

编程日记 2024/10/30 5:38:15

unseping攻防世界

源码分析 <?php highlight_file(__FILE__);//代码高亮 class ease{//声明了两个私有属性&#xff1a;保存要调用的方法的名称和保存该方法的参数。$method&#xff0c;$argsprivate $method;private $args;//构造函数在实例化类的对象时初始化,即为对象成员变量赋初始值。…...

编程日记 2024/10/30 5:37:14

大厂面试真题-简单描述一下SpringBoot的启动过程

SpringBoot的启动流程是一个复杂但有序的过程&#xff0c;它涉及多个步骤和组件的协同工作。以下是SpringBoot启动流程的详细解析&#xff1a; 一、启动main方法 当SpringBoot项目启动时&#xff0c;它会在当前工作目录下寻找有SpringBootApplication注解标识的类&#xff0c…...

编程日记 2024/10/30 5:36:13

4. 硬件实现

博客补充&#xff1a; CUDA C 编程指南学习_c cuda编程-CSDN博客https://blog.csdn.net/qq_62704693/article/details/141225395?spm1001.2014.3001.5501NVIDIA GPU 架构是围绕可扩展的多线程流式多处理器 &#xff08;SM&#xff09; 阵列构建的。当主机 CPU 上的 CUDA 程序…...

编程日记 2024/10/30 5:34:11

《操作系统真象还原》第3章 完善MBR【3.1 — 3.2】

目录 引用与说明 3.1、地址、section、vstart 浅尝辄止 1、什么是地址 2、什么是 section【汇编】 3、什么是 vstart【汇编】 3.2、CPU 的实模式 1、CPU 工作原理【重要】 2、实模式下的寄存器 4、实模式下 CPU 内存寻址方式 5、栈到底是什么玩意儿 6 ~ 8 无条件转移…...

编程日记 2024/10/30 5:33:11

八大排序-冒泡排序

在里面找动图理解 【数据结构】八大排序(超详解附动图源码)_数据结构排序-CSDN博客 一 简介 冒泡排序应该是我们最熟悉的排序了&#xff0c;在C语言阶段我们就学习了冒泡排序。 他的思想也非常简单&#xff1a; 两两元素相比&#xff0c;前一个比后一个大就交换&#xff0…...

编程日记 2024/10/30 5:31:09

基于Spring Boot+Vue的助农销售平台(协同过滤算法、节流算法、支付宝沙盒支付、图形化分析)

&#x1f388;系统亮点&#xff1a;协同过滤算法、节流算法、支付宝沙盒支付、图形化分析&#xff1b; 一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构&#xff1a;B/S架构 运行环境&#xff1a;win10/win11、jdk17 前端&…...

编程日记 2024/10/30 5:30:08

uniapp写抖音小程序阻止右滑返回上一个页面

最近用uniapp写小程序遇到一个问题因为内部用到右滑的业务&#xff0c;但是只要右滑就会回到上一页面&#xff0c;用了event.preventDeafult()没有用&#xff0c;看了文档找到了解决办法 1.在最外层view加上touchstart事件 <view class"container" touchstart&q…...

编程日记 2024/10/30 5:29:07

华为配置手工负载分担模式链路聚合实验

目录 组网需求 配置思路 操作步骤 配置文件 组网图形 图1 配置手工负载分担模式链路聚合组网图 组网需求配置思路操作步骤配置文件 组网需求 如图1所示&#xff0c;AC1和AC2通过以太链路分别都连接VLAN10和VLAN20&#xff0c;且AC1和AC2之间有较大的数据流量。 用户希望A…...

编程日记 2024/10/30 5:28:06

【Spring】Cookie与Session

&#x1f490;个人主页&#xff1a;初晴~ &#x1f4da;相关专栏&#xff1a;计算机网络那些事 一、Cookie是什么&#xff1f; Cookie的存在主要是为了解决HTTP协议的无状态性问题&#xff0c;即协议本身无法记住用户之前的操作。 "⽆状态" 的含义指的是: 默认情况…...

编程日记 2024/10/30 5:27:05

chat_gpt回答：qt中，常见格式及格式转换

在Qt中&#xff0c;常见的数据格式包括&#xff1a; QVariant&#xff1a;可以存储多种数据类型&#xff0c;包括整型、浮点型、字符串、布尔值、日期等。QString&#xff1a;用于存储和处理文本字符串。QByteArray&#xff1a;用于处理字节数组&#xff0c;常用于二进制数据。…...

编程日记 2024/10/30 5:24:02

CSS兼容处理

“前端开发兼容——CSS篇” 在前端开发中&#xff0c;CSS样式的兼容性问题常常让开发者感到棘手&#xff0c;尤其是当涉及到IE浏览器时。由于IE浏览器版本繁多&#xff0c;每个版本在CSS支持上还存在差异&#xff0c;这导致开发者在实现统一的视觉效果时&#xff0c;不得不编写…...

编程日记 2024/10/30 5:22:00

乌鲁木齐网站设计要多少/杭州网站外包

在这个问题上的任何帮助将不胜感激。所以基本上我想对我的SQL数据库运行查询并将返回的数据存储为Pandas数据结构。我已附上查询代码。我正在阅读有关Pandas的文档&#xff0c;但是在识别查询的返回类型时遇到了问题。我试图打印查询结果&#xff0c;但没有提供任何有用的信息。…...

编程日记 2025/1/13 16:13:42

网站建设官方网站/免费seo网站优化

海量数据分成两块&#xff0c;一是系统建设技术&#xff0c;二&#xff0c;海量数据应用。 先说系统建设&#xff0c;现在主流的技术是HADOOP&#xff0c;主要基于mapreduce的分布式框架。目前可以先学习这个。但是我的观点&#xff0c;在分布式系统出来之前&#xff0c;主要是…...

编程日记 2025/1/13 15:11:50

wordpress 安装语言/网络营销的具体形式种类

随着微信的普及&#xff0c;扫码登录方式越来越被现在的应用所使用。它因为不用去记住密码&#xff0c;只要有微信号即可方便快捷登录。微信的开放平台原生就有支持扫码登录的功能&#xff0c;不过大部分人还是在用公众平台&#xff0c;所以扫码登录只能自行实现。这里基于微信…...

编程日记 2025/1/13 13:43:14

重庆手机微信网站建设/人工智能教育培训机构排名

placeholder 输入一些解释文字 <marquee></marquee> 使标签滚动起来 background-repeat: no-repeat; 使图片不平铺 <hr /> 间隔线 <div></div>代码块 写下拉菜单 <select><option>中国大陆</option> </select>requir…...

编程日记 2025/1/13 10:56:26

如何做网站怎么赚钱/google关键词搜索量

前言 关于流式调用&#xff0c;熟悉Java的小伙伴可能第一时间都会想到Java8关于stream相关的API&#xff0c;类似这种的代码list.stream().map(item->item1).colletion(Collector::toList)&#xff0c;流式调用带给我们的直接感受是代码量的减少。但是由于Java的特性导致一…...

编程日记 2025/1/13 9:45:46

广告公司会建设网站吗/广州网站推广软件

提要&#xff1a; 有些机子特别逆天&#xff0c;比如说Thinkpad e系列。好好的f1-f12一定要加上fn才能按出来&#xff0c;默认的是画在上面的功能键&#xff0c;作为娱乐来说其实是还不错的&#xff0c;但是像我等程序员就觉得特别逆天了。你有两个选择&#xff0c;第一加个外接…...

编程日记 2025/1/13 9:24:19