关于Better-Scroll的高度计算问题

最新推荐文章于 2023-03-20 00:25:20 发布
最新推荐文章于 2023-03-20 00:25:20 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： vue.js学习 js学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25346499/article/details/108966649
版权

问题出现

在做vue的商城小项目的时候，为了解决原生滚动的问题而使用了Better-Scroll插件。但是使用时发现Better-Scroll的高度计算出了点问题，导致整个内容无法滚动。

原因

所有的图片都是异步加载的，所以当Better-Scroll计算内容高度时图片的加载可能还没有完成，导致高度计算错误，从而出现内容高度没问题但是却无法滚动的情况。

解决方法

尝试在创建Better-Scroll对象时使用nextTick()方法来解决该问题，但是没有效果，所以又尝试给了一个200ms延迟，解决了该问题，但是当尝试将200ms降为20ms时发现图片还是没有加载完。

正确的解决方法应该是在图片异步加载完成后再创建Better-Scroll对象或是调用refresh方法。

在createdmounted钩子中使用load事件来监听每一张图片的加载，一旦有图片加载完成就向事件总线提交一个事件，再在其他组件中进行事件的响应处理。

初始化事件总线:
Vue.prototype.$bus = new Vue()
使用一个Vue实例充当事件总线

coderyy1
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用better-scroll实现滑动以及左右联动
10-15
在Vue.js应用中，我们可以利用Better Scroll库来实现滑动效果和左右联动功能。Better Scroll是一个强大的滚动插件，能够提供类似原生滚动的流畅体验，尤其适合移动端应用。以下是对如何在Vue项目中集成和使用Better ...
vue使用 better-scroll的参数和方法详解
08-28
21. `resizePolling`：窗口调整时重新计算Better-Scroll的时间间隔。 22. `preventDefault`：是否阻止默认事件。 23. `preventDefaultException`：对象定义哪些元素不应阻止默认事件。 24. `HWCompositing`：是否...
vue中使用better-scroll内容页的高度计算问题
雄关漫道
08-29 7597
在vue中的内容页中，总是会出现内容页的滚动高度不够问题，原因其实就是better-scroll的初始化时图片还没下载完。 所以计算的是当时dom元素的高度。找到原因后解决方案也就好说了。 直接上代码： updated () {
 ...
【vue】 better-scroll 高度不够时遇到的问题
qq_41399901的博客
04-28 2130
前言 前段时间在开发时，需要实现手机端的流畅滑动，最开始直接用的是 mint-ui ，但是中途发现了一些问题，后来发现了 better-scroll ，简单用了一下，发现效果还不错，但也是遇到了一些小问题… 先附上 better-scroll 官方网站： http://ustbhuangyi.github.io/better-scroll/doc/api.html 问题 在 vue 中，结合 vu...
vue 中 使用better-scroll 时因为图片没有下载完导致滚动条高度不够，无法浏览全部内容
来杯卡布奇诺的博客
06-01 698
解决vue 中 使用better-scroll 时因为图片没有下载完导致滚动条高度不够，无法浏览全部内容的问题 better-scroll 是根据 scrollerHeight 属性决定有多少区域可以滚动的。 scrollerHeight 属性是根据放 better-scrol 的 content 中的子组件的高度来计算的。 better-scroll 初始化是在dom 加载后执行，此时图片没有下载完成，计算 scrollerHeight 属性时，是没有将图片高度计算在内的。所以，计算出来的结果是错
Better-scroll中因为图片没加载完成导致高度计算错误的解决办法
qq_43508736的博客
08-02 1019
如题 Better-scroll是一款很方便的滚动插件。但是在做项目时我发现有时候会出现滚动失效的问题。即滚动长度不够 导致一些东西无法显示。 究其原因 是因为Better-scroll在决定有多少滚动区域时是根据scrollerHeight属性决定的。而ScrollerHeight是根据Better-scroll的content class中的子组件的高度来决定的。 在我的开发练习中 引入了图片 但是better-scroll在初始计算时并没有把图片的高度计算在内（或者说是没来得及加载进来），后来图片加载
关于在移动端开发过程中使用better-scroll遇到的bug
qq_43429800的博客
02-24 392
我使用的better-scroll版本是2.2.0，在移动端电商开发过程中遇到了不少的bug，在这里特别记录一下。 开发Home组件时 将better-scroll用在首页里： 当数据请求较慢或者图片加载慢时，BScroll计算出来的scrollerHeight要比理想中的高度小，这时就会出现滚不动页面的情况。 解决方法:可以给每个图片添加 @load="" 监听图片加载完成情况。 再通过debounce函数调用scroll.refersh() 刷新一下BScroll。 tab吸顶效果时 在BScr
vue和better-scroll实现列表左右联动效果详解
10-17
【Vue和Better-Scroll实现列表左右联动效果详解】 在Web开发中，特别是在电商或信息展示类项目中，经常需要实现列表的联动效果，即当用户在一个列表中滚动时，另一个相关的列表也会相应滚动。Vue.js作为一款轻量级...
vue2.0 better-scroll 实现移动端滑动的示例代码
08-28
接着，在计算属性中比较数组中的高度值与当前的 scroll 的 y 坐标值，返回的是当前所在高度的 index 值。最后，在模板中将 index 值绑定到相应的左侧列表分栏，并指定一个类名，例如 "current"。 实现步骤 1. ...
better-scroll 左右联动效果--高度还原美团、饿了么外卖商品拉动效果 工作笔记
weixin_44040867的博客
05-07 528
1、下载 yarn add better-scroll -S 2、引入 import BScroll from 'better-scroll' 3、初始化 注意DOM节点的同步异步问题 betterscroll在new的时候就会立刻计算当前DIV的高度（所以必须在绘制完异步DOM节点，在new，否则高度不对，无法滚动） 重：给要滚动的div套一个父级div ============================================================== 4、请求发送完毕
better-scroll 高度计算错误
m0_51754096的博客
03-20 94
better-scroll因为图片没有加载完而计算高度错误
用better-scroll滚动失效，v-if、v-show与better-scroll配合使用问题
jie_rookie的博客
09-29 525
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的博客
12-09 8316
better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件。
Better-Scroll可滚动区域问题
qq_42696432的博客
01-05 4876
使用better-scroll插件的时候，发现页面图片加载图片比较慢的话，better-scroll的滚动高度就会为图片没有加载的高度，如果想获取图片加载后的高度，使用了bus事件总线进行处理，高度获取
better-scroll高度问题
weixin_30507269的博客
05-17 1200
better-scroll无法滚动主要2方面原因，1）层级关系。2）高度问题 转载于:https://www.cnblogs.com/sonwrain/p/9052908.html
(Vue2.0)在服务器返还数据中带有<img>标签时,用v-html渲染,better-scroll高度拉不到最底的问题
oxgos的博客
08-11 4375
Vue2.0 + better-scroll + Promise
关于better-scroll 小问题
wcq_work1995的博客
05-31 5630
今天在用黄毅老师的better-scorll插件的时候碰到一个小问题，发现页面无法上下滚动，我花了一点时间去翻阅了api和审查绑定元素，发现代码应该没问题，然后我在控制台输出了绑定的scroll对象 眼睛直接扫到了hasVerticalScroll这个key，哈哈，这不是‘是否有垂直滚动’的键吗，于是我在浏览器端直接将‘false’改成了‘true’，果然可以直接滚动，但是只能拖拽（因为高度不
Vue中使用better-scroll所遇到的若干问题
热门推荐
南乔几经秋、的博客
12-24 1万+
在vue中使用better-scroll
better-scroll使用的坑
yaoshuhong43的博客
02-20 3066
这两天在写一个音乐播放器的网页，需要用到better-scroll，按照   https://www.imooc.com/article/18232   的教程一步一步配置，还是没办法滚动，检查了一下是不是初始化之后才开始渲染组件，也发现没有问题，最后发现问题关键在这里需要给父容器增加overflow:hidden以及设置height，不然是没办法上下滚动的。然后晒晒效果图...
vue3封装better-scroll问题
最新发布
12-21
在Vue3中封装better-scroll可以按照以下步骤进行： 1. 首先，安装better-scroll依赖： ```shell npm install better-scroll --save ``` 2. 在Vue组件中引入better-scroll并进行封装： ```vue <template> <div class="wrapper" ref="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> </div> </template> <script> import { ref, onMounted } from 'vue' import BScroll from 'better-scroll' export default { setup() { const wrapperRef = ref(null) let scroll onMounted(() => { scroll = new BScroll(wrapperRef.value, {}) }) return { wrapperRef } } } </script> ``` 在上述代码中，我们使用了Vue3的Composition API来封装better-scroll。通过`ref`函数创建了一个`wrapperRef`引用，用于获取DOM元素的引用。然后，在`onMounted`钩子函数中，创建了一个新的better-scroll实例，并将其绑定到`wrapperRef`所引用的DOM元素上。 这样，我们就完成了在Vue3中封装better-scroll的过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值