supermall项目上拉加载bug分析

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实例

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

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

相关文章

《Python游戏编程入门》注-第2章2

《Python游戏编程入门》的“2.2.5 绘制线条”中提到了通过pygame库绘制线条的方法。 1 相关函数介绍 通过pygame.draw模块中的line()函数来绘制线条,该函数的格式如下所示。 line(surface, color, start_pos, end_pos, width1) -> Rect 其中,第一…

Go 语言中的 GOMAXPROCS

在 Go 语言中,GOMAXPROCS 是一个非常重要的设置,它决定了程序中可以同时运行的 goroutines 的数量。默认情况下,GOMAXPROCS 的值与机器的 CPU 核心数相同,这样可以充分利用多核 CPU 的并发处理能力。但是,在某些环境下…

UnityShader——基础篇之学习Shader所需的数学基础——下

裁剪空间 顶点接下来要从观察空间转换到裁剪空间(也被称为齐次裁剪空间) 中,这个用于变换的矩阵叫做裁剪矩阵,也被称为投影矩阵 裁剪空间的目标是能够方便地对渲染图元进行裁剪:完全位于这块空间内部的图元将会被保留&…

[deadlock]死锁导致的设备登录无响应问题

[deadlock]死锁导致的设备登录无响应问题 一、问题现象二、初步观察三、继续深挖查看netlink相关信息查看warnd进程栈 四、再接再厉查看warnd 用户栈 后记 一、问题现象 实验室一台压力测试设备突然无法登录,无论web页面,ssh或者telnet登录,…

[Redis] Redis数据持久化

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…

【设计模式系列】装饰器模式

目录 一、什么是装饰器模式 二、装饰器模式中的角色 三、装饰器模式的典型应用场景 四、装饰器模式在BufferedReader中的应用 一、什么是装饰器模式 装饰器模式是一种结构型设计模式,用于在不修改对象自身的基础上,通过创建一个或多个装饰类来给对象…

无人机之低空管控技术

无人机的低空管控技术是对低空飞行活动进行管理和控制的一系列措施和技术的总称,旨在确保低空飞行活动的安全、有序和高效。 一、主要技术手段 雷达系统监测 原理:雷达是利用电磁波探测目标的电子设备,通过发射电磁波对目标进行照射并接收…

【MySQL数据库】MySQL高级语句(SQL语句进阶版)

文章目录 SQL语句进阶版MySQL查询数据的过程一、连接与身份验证二、查询缓存(MySQL 8.0之前版本)三、查询解析与优化四、查询执行五、返回结果 MySQL语句准备环境创建 location 表并插入数据创建 store_info 表并插入数据查询示例 语句示例SELECTDISTINC…

数据结构与算法分析:你真的理解排序算法吗——计数排序(代码详解)

一、算法描述 一个会计师负责对一个小饭店的账本进行审核。每天晚上饭店打洋时,饭店主人记录白 天的总销售额,然后打印出有总额和日期的收据。这些收据存放在一个大盒子里面.每 年年终,会计师审核盒子中的这些收据,检查是否有的已…

Java.6--多态-设计模式-抽象父类-抽象方法

一、多态 1.定义--什么是多态? a.同一个父类的不同子类对象,在做同一行为的时候,有不同的表现形式,这就是多态。(总结为:一个父类下的不同子类,同一行为,不同表现形式。&#xff0…

【力扣】GO解决子序列相关问题

文章目录 一、引言二、动态规划方法论深度提炼子序列问题的通用解法模式 三、通用方法论应用示例:最长递增子序列(LeetCode题目300)Go 语言代码实现 四、最长连续递增序列(LeetCode题目674)Go 语言代码实现 五、最长重…

RHCE-web篇

一.web服务器 Web 服务器是一种软件或硬件系统,用于接收、处理和响应来自客户端(通常是浏览器)的 HTTP 请求。它的主要功能是存储和提供网站内容,比如 HTML 页面、图像、视频等。 Web 服务器的主要功能 处理请求&#xf…

目前最新 Reflector V11.1.0.2067版本 .NET 反编译软件

目前最新 Reflector V11.1.0.2067版本 .NET 反编译软件 一、简介二、.NET Reflector的主要功能包括:1. **反编译**: 反编译是将已编译的.NET程序集(如.dll或.exe文件)转换回可读的源代码。这使得开发者可以查看和学习第三方库的实现细节&…

TCP 攻击为何在 DDoS 攻击中如此常见

分布式拒绝服务攻击(Distributed Denial of Service, DDoS)是一种常见的网络攻击手段,通过大量请求使目标服务器过载,导致合法用户无法访问服务。在众多 DDoS 攻击类型中,TCP 攻击尤为常见。本文将探讨 TCP 攻击在 DDo…

MySQL8 配置密码和用户创建及授权详解:Java开发最佳实践

全文目录: 开篇语📌 目录🌟 前言📝 摘要📚 简介🔍 概述🧩 核心源码解读1️⃣ 加载驱动2️⃣ 建立数据库连接3️⃣ 用户创建4️⃣ 配置权限5️⃣ 刷新权限 💻 案例分析🌐 …

Spring Boot植物健康系统:绿色科技的创新引擎

摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了植物健康系统的开发全过程。通过分析植物健康系统管理的不足,创建了一个计算机管理植物健康系统的方案。文章介绍了植物健康系统的系统分析部分&…

手机淘宝自动下单退货自动化RPA脚本机器人

使用手机集线器连接多个手机并发运行。 脚本分3个部分(读取本地连接下单,退货获取退货地址信息,填写快递单号) 脚本部分图结构看下面的图片 部分数据统计展示

Python中正则表达式的使用

下面介绍正则表达式的基础知识和使用方法。 正则表达式是什么? 正则表达式(Regular Expression,简称regex)是一种用于匹配字符串模式的强大工具。就像是一种特殊的搜索语言。 Python中使用正则表达式的基本步骤: import re # 首先导入re模块# 基本使…

基于vue框架的的高校设备信息管理系统的设计与实现tx6d7(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能:设备管理员,设备维护员,设备类别,设备,设备入库,设备分发,设备调拨,定期维护,维护任务,设备运行记录 开题报告内容 基于Vue框架的高校设备信息管理系统的设计与实现开题报告 一、项目背景及意义 随着高校教育事业的蓬勃发展&#xff…

VuePress的基本常识

今天大概了解了一下Vuepress,感觉很棒,看着极其简单,自己也想做一个,后续我大概率也会做一个用Vuepress为基础做的博客网站,很酷~ 哈哈哈,下面是我今天学习Vuepress的一些内容,简单分享下&#…