Better-scroll中因为图片没加载完成导致高度计算错误的解决办法

最新推荐文章于 2022-01-05 20:16:09 发布
最新推荐文章于 2022-01-05 20:16:09 发布
阅读量1k 收藏 1
点赞数 1
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43508736/article/details/107753549
版权

如题 Better-scroll是一款很方便的滚动插件。但是在做项目时我发现有时候会出现滚动失效的问题。即滚动长度不够 导致一些东西无法显示。

究其原因 是因为Better-scroll在决定有多少滚动区域时是根据scrollerHeight属性决定的。而ScrollerHeight是根据Better-scroll的content class中的子组件的高度来决定的。

在我的开发练习中 引入了图片 但是better-scroll在初始计算时并没有把图片的高度计算在内（或者说是没来得及加载进来），后来图片加载进来后，scrollerHeight也没有进行更新 因此高度是错误的（变小了）

解决方法就是调用Better-scroll的refresh函数去刷新高度。

1.给子组件设置imageload函数
在这里插入图片描述

2.在组件里选定scroll实例 并在图片加载完成后实现refresh函数
在这里插入图片描述
这样 就不会出现滚动区域变小的bug了！

Yangy612
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS动态加载图片，无法获取图片宽高的问题
wl562354983的博客
03-12 3506
写一个动态加载图片的瀑布流，并用animate实现简单的动画效果，所发现的问题。首先先贴代码：//模拟动态数据 var dataInt = {"data":[{"src":"31.jpg"}, {"src":"32.jpg"}, {"src":"33.jpg"}, {"src":"34.jpg"}, {"src&quot
vue better-scroll-滚动组件 的使用和可滚动区域的问题
自扰。的博客
05-26 1073
一.浏览器滚动原理 ​ 当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是我们的视口展示不下内容的时候。会通过滚动条的方式让用户滚动屏幕看到剩余的内容。 二.安装 ​ npm install better-sroll --save 三.引用 ​ import BScroll from 'better-scroll' 四.使用 let scroll = new BScroll(DOM,{}) ​ ​ mounted(){ /
解决better-scroll因为图片没有下载完导致滚动条高度不够
weixin_43743956的博客
12-16 1549
updated () { //解决better-scroll因为图片没有下载完导致的滚动条高度不够，无法浏览全部内容的问题。 //原因是better-scroll初始化是在dom加载后执行，此时图片没有下载完成，导致滚动条高度计算不准确。 //利用图片的complete属性进行判断，当所有图片下载完成后再对scroll重新计算。 le...
vue 中 使用better-scroll 时因为图片没有下载完导致滚动条高度不够，无法浏览全部内容
来杯卡布奇诺的博客
06-01 711
解决vue 中 使用better-scroll 时因为图片没有下载完导致滚动条高度不够，无法浏览全部内容的问题 better-scroll 是根据 scrollerHeight 属性决定有多少区域可以滚动的。 scrollerHeight 属性是根据放 better-scrol 的 content 中的子组件的高度来计算的。 better-scroll 初始化是在dom 加载后执行，此时图片没有下载完成，计算 scrollerHeight 属性时，是没有将图片高度计算在内的。所以，计算出来的结果是错
关于Better-Scroll的高度计算问题
qq_25346499的博客
10-08 1486
问题出现 在做vue的商城小项目的时候，为了解决原生滚动的问题而使用了Better-Scroll插件。但是使用时发现Better-Scroll的高度计算出了点问题，导致整个内容无法滚动。 原因 所有的图片都是异步加载的，所以当Better-Scroll计算内容高度时图片的加载可能还没有完成，导致高度计算错误，从而出现内容高度没问题但是却无法滚动的情况。 解决方法 尝试在创建Better-Scroll对象时使用nextTick()方法来解决该问题，但是没有效果，所以又尝试给了一个200ms延迟，解决了该问题，
【vue】 better-scroll 高度不够时遇到的问题
qq_41399901的博客
04-28 2137
前言 前段时间在开发时，需要实现手机端的流畅滑动，最开始直接用的是 mint-ui ，但是中途发现了一些问题，后来发现了 better-scroll ，简单用了一下，发现效果还不错，但也是遇到了一些小问题… 先附上 better-scroll 官方网站： http://ustbhuangyi.github.io/better-scroll/doc/api.html 问题 在 vue 中，结合 vu...
用better-scroll滚动失效，v-if、v-show与better-scroll配合使用问题
jie_rookie的博客
09-29 536
v-if会出现多个better-scroll只初始化一次； 解决：采用v-show v-show会出现为false的better-scroll滚动不了（display为none的元素是获取不到高度的）； 解决方案一：better-scroll初始化时判断v-show的值是否为true且better-scroll还未初始化的情况下进行初始化； 解决方案二：如下代码 import BScroll from "better-scroll"; export default { data() {
Better-Scroll可滚动区域问题
qq_42696432的博客
01-05 4884
使用better-scroll插件的时候，发现页面图片加载图片比较慢的话，better-scroll的滚动高度就会为图片没有加载的高度，如果想获取图片加载后的高度，使用了bus事件总线进行处理，高度获取
小程序瀑布流问题记录
hjh15827475896的博客
09-18 289
当瀑布流页面很长的时候, 势必会引起最下面的图片长短差别很大影响显示效果, 这时我们就需要计算, 让最长的图片, 补充到最短的位置上去 先说一下这里面会有什么难点和问题 会遇到一个很严重的问题，就是当页面内容足够多了的时候，会出现严重的不对齐状况，因为我们没有办法计算它的高度，除非每次加载完后再进行一次重排。又有人说了，我们为什么没有办法得到它的高度呢？好，这个问题问得好，因为图片没加载完前是很难知道高度的，注意是很难，不是不能。方法可能会有如下几种： 1。后台返回图片高度 2。通过预加载图片得到高度 3。
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决
热门推荐
郑伟斌的博客
04-09 2万+
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决1.什么是clientHeight、scrollHeight和offsetHeight1.1 clientHeight是什么1.2 offsetHeight是什么1.3 clientHeight和offsetHeight的注意点1.4 scrollHeight和它的大坑jQuery和原生js...
Better-scroll 的学习
qq_44096635的博客
05-25 145
const bscroll = new Bscroll(el,option); 1.监听滚动 probeType:0/1/2/3 2是手指滚动 3是只要滚动就触发，惯性往上也是 bscroll.on(“scroll”,(position)=> {}) 2.上拉加载 pullUpLoad:true bscroll.on(“pullingUop”,()=> {}) 上拉加载更多，获取完数据后，最后要调用finishpullUp() ; 滚动时候如果有图片，图片加载过慢，可能滚动时候有bug，卡顿。
vue中使用better-scroll内容页的高度计算问题
雄关漫道
08-29 7609
在vue中的内容页中，总是会出现内容页的滚动高度不够问题，原因其实就是better-scroll的初始化时图片还没下载完。 所以计算的是当时dom元素的高度。找到原因后解决方案也就好说了。 直接上代码： updated () {
 ...
页面滚动组件scroll不能正确获取高度的问题如何解决
abc942857321的博客
11-26 1430
图一： 图二： 图二源码的页面显示为图一，在这里有一个获取到数据后，scroll有时滚动高度不正确的问题。在这个滚动中有两部分内容，第一部分是slider焦点图区域，第二部分是热门歌单推荐列表部分，这两部分的数据内容分别从两个接口中获取，因为网络速度的原因，所以接口获取数据的速度不一致，而且先后也存在不确定性，如果第一部分的数据先获取，页面先渲染，那么页面高度不会存在什么问题...
获取图片高度问题------页面图片加载完成后获取图片高
kellywong的博客
04-26 2584
问题描述： 因为埋点的需要，需要判断一个产品是否进入用户可视区域，在实现过程中出现： 每次新打开一个窗口，使用element.getBoundingClientRect().top的值都是错的，但是刷新页面，值又正常了。 思考过程： 为什么会出现这种情况啊，明明是在componentDidMount中做的处理，该生命周期函数运行的时候不是页面dom都加载完了吗，那不应该获取不到图片高度啊？ 是不是...
总结在使用better-scroll时所遇到的几个小问题
wkx8324183的博客
08-29 1987
首先在布局时父级只能单独包含better-scroll内容层 better-scroll内容层里点击效果不起作用，需要在调用实例时添加click参数，值为ture 在滑动到一定高度时增加内容，继续滑动会出现卡顿现象？这是因为高度发生变化，better-scroll需要重新统计高度。 better-scroll需要设置高度 后续遇到其他问题会继续补充。 ...
(判断多张图片加载完成)JS无法获取请求的图片的高度和宽度的解决办法
weixin_33690367的博客
01-28 256
引入：          网页中有时候需要获取图片的宽度和高度，来定义图片显示位置，可是这是需要从服务器请求图片，下载到本地才能够得到图片的高度，那怎么办呢？   解决方案：（使用JS的onload方法）         jquery 　　　var totalimages = 10; 　　　var loadedimages = 0; 　　　$(“<img/>”).load...
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文).zip
最新发布
08-05
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文)
better-scroll上拉加载
07-28
对于better-scroll的上拉加载，你可以按照以下步骤进行操作： 1. 首先，你需要在HTML文件中引入better-scroll的库文件。 ```html <script src="better-scroll.js"></script> ``` 2. 在HTML文件中，创建一个容器元素来包含要滚动的内容。 ```html <div id="scrollContainer"> <!-- 内容 --> </div> ``` 3. 在JavaScript文件中，初始化better-scroll，并设置上拉加载的配置。 ```javascript var scroll = new BScroll('#scrollContainer', { pullUpLoad: { threshold: 50 // 距离底部多少距离时触发上拉加载 } }); ``` 4. 在JavaScript文件中，监听上拉加载的事件，并在触发时执行相应的操作。 ```javascript scroll.on('pullingUp', function() { // 执行上拉加载的操作 // 比如发送请求获取更多数据 // 然后将新数据添加到原有内容中 // 最后告诉better-scroll上拉加载完成 scroll.finishPullUp(); }); ``` 这样，当用户上拉到距离底部一定距离时，就会触发上拉加载的操作。你可以在`pullingUp`事件中执行你需要的操作，比如发送请求获取更多数据，并将新数据添加到原有内容中。 需要注意的是，上述代码只是简单示例，实际使用时可能需要根据你的具体需求进行适当的修改。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值