2-BetterScroll中出现的问题

最新推荐文章于 2022-11-15 15:56:09 发布
最新推荐文章于 2022-11-15 15:56:09 发布
阅读量162 收藏
点赞数
分类专栏： 项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36048532/article/details/110507804
版权

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203001020151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MDQ4NTMy,size_16,color_FFFFFF,t_70在这里插入图片描述
图片是异步记载的，图片没来之前会计算出一个可以滚动的区域，而图片来了之后呢也会计算出一个可以滚动的区域。
两个滚动区域不一致的情况下会出现滚动错误。
解决办法：需要做两件事情：

  1. 监听图片什么时候加载完毕
  2. 做一个刷新
    this.$refs.scroll.scroll.refresh();
Better-scroll可滚动区域问题以及防抖函数处理
weixin_46567428的博客
01-30 724
Better-scroll可滚动区域问题 已知：better-scroll在决定有多少区域可以滚动时，是根据scrollerHeight属性决定的。 问题描述： scrollHeight属性是根据放better-scroll的content中的子组件的高度计算的。 但是在better-scroll会计算页面的高度，这时候如果页面中的图片还没加载完成则会出现计算的高度与实际不相符 后来图片加载进来后有了新的高度，但是scrollHeight并没有进行更新。 所以滚动出现问题 如何解决这个问题？ 监听每
better-scroll笔记
lyy_fighting的博客
01-09 672
better-scroll 来源：https://github.com/ustbhuangyi/better-scroll 使用说明：https://better-scroll.github.io/docs/en-US/ 操作案例 （学习coderwhy的vue框架ing） 演示代码在src/views/category/Category.vue 1.安装框架 1）npm install better-scroll --save 弹幕大佬说新版本很多bug，所以跟着老师安装的版本即可 npm install
betterScroll插件使用问题
最新发布
长颈鹿的博客
11-15 378
在vue项目中使用betterScroll插件遇到的问题整合
vue中使用better-scroll插件注意事项和参数
honey_seve7n的博客
10-10 1434
better-scroll常用于移动端页面滚动 1.注意问题，它一定有一个固定尺寸的wrapper，内容的高度要大于这个wrapper才会发生滚动，所以不要忘记加wrapper 2.在使用better-scroll页面，点击事件无效，是因为better-scroll阻止了默认的点击事件，所以需要传入click：true的参数到better-scroll的对象中，如下 3.当页面高度出现变化时...
vue页面滚动和textarea滚动冲突问题 ,better-scroll和textarea滚动冲突解决
xtyzmnchen的博客
11-26 2052
//将代码放入全局 ,可解决所有界面中textarea不滚动问题 window.addEventListener('touchmove', function(e) { var target = e.target; if (target && target.tagName ===...
better-scroll.js文档
汇而不置的博客
04-09 1万+
better-scroll 介绍 better-scroll 是什么 better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。better-scroll 是基于原生 JS 实现的，不依赖任何框架。它...
vue-better-scroll 的使用实例代码详解
10-17
### Vue-better-scroll使用实例详解 #### 1. Vue-better-scroll简介 ...以上便是vue-better-scroll的使用实例代码详解，通过以上步骤和代码示例，可以掌握在Vue项目中应用better-scroll实现滚动效果的基本方法。
vue使用better-scroll实现滑动以及左右联动
10-15
在Vue.js应用中，我们可以利用Better Scroll库来实现滑动效果和左右联动功能。Better Scroll是一个强大的滚动插件，能够提供类似原生滚动的流畅体验，尤其适合移动端应用。以下是对如何在Vue项目中集成和使用Better ...
解决betterScroll在vue中存在图片时,出现拉不动的问题
10-17
betterScroll是一个基于原生JavaScript的滚动插件，它提供了一个简单但强大的方法来实现多点...通过以上步骤，我们可以在Vue项目中有效地解决betterScroll在图片加载期间出现的滚动卡顿问题，从而提升用户的交互体验。
vue better scroll 无法滚动的解决方法
08-27
在 Vue 项目中使用 Better Scroll 时，可能会遇到无法滚动的问题。本文将详细介绍 Vue Better Scroll 无法滚动的解决方法。 问题描述 在使用 Better Scroll 时，可能会遇到无法滚动的问题。例如，在实现订单列表...
better-scroll 实现下拉刷新、上拉加载的那些坑
蒲公英芽的博客
03-13 1万+
简介 better-scroll 是一款近几年移动端常用的插件，重点解决移动端（已支持PC）各种滚动场景需求的插件。可以实现竖向滚动效果，也可以实现横向滚动的效果。它不仅可以做普通的滚动列表，还可以做轮播图、局部文字滚动、下拉刷新、上拉加载等等。 better-scroll 是基本原生JS 实现的，不依赖任何框架。它编译后的代码大小是63kb，压缩后是35kb，zip后仅有9kb，是一款非常轻量的...
vue使用 better-scroll的参数和方法
weixin_34310785的博客
11-09 319
格式：var obj = new BScroll(object,{[option1,],.,.});注意：1、要确保object元素的高度比其父元素高2、使用时，一定要确保object所在的dom渲染后，再用上面的语句，或者obj.refresh() Options 参数startX: 0 开始的X轴位置startY: 0 开始的Y轴位置scrollY: true 滚动方向为 Y 轴scrollX...
vue学习之better-scroll报错
King的博客
11-17 762
[BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll [Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘children’ of undefined” 出现上述问题，只需要把v-if改成v-show即可。
[BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll
热门推荐
qq_43158436的博客
10-20 1万+
在用vue的better-scroll插件的时候遇到了这个错误，具体如下 [BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll [Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘children’ of undefined” 怎...
vue使用better-scroll踩坑
Tron_future的博客
09-06 631
用vue写手机端页面的时候使用到了better-scroll来替换原生的scroll，不过在封装插件的时候发现滚动不了，检查官方api和代码都没有发现问题 以下是源代码Scroll.vue： <template> <div class="wrapper" ref="wrapper"> <div class="scrollcontent"> <slot></slot> </div> </div&g
使用better-scroll
qq_36457584的博客
06-30 3765
一.使用1.npm install better-scroll --save2.goods_l和goods_r是容器，title和goods_item是内容3.js4.注意事项ref不要用a-b连名符号写如果html里面写ref = "goods-Wrapper"用this.$refs.goodsWrapper  或者  this.$refs.goods-Wrapper  或  this.$ref...
[BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll [Vue warn]: Error in mounted hook
katydids的博客
11-09 3933
在使用better-scroll的时候遇到过的错误之一 [BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll [Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘children’ of undefined” 明明已经了DOM节点，为...
BetterScroll 2.x 的 pulldown 使用、pullup使用
weixin_43297321的博客
03-15 3856
官方文档：https://better-scroll.github.io/docs/zh-CN/plugins/pulldown.html#%E5%AE%89%E8%A3%85 BetterScrol滚动原理 有唯一的子节点 子节点必须超出包裹的高度 new BScroll（‘容器名’） html内容必须已经渲染完成 绿色部分为 wrapper，也就是父容器，它会有固定的高度。 黄色部分为 ...
解决vue-music中better-scroll轮播图自动轮播故障
这里出现的问题是，当安装了新版本的better-scroll后，轮播组件不再能够自动轮播。 旧版本的slider组件代码如下： ```html <div class="slider-group" ref="sliderGroup"> <slot></slot> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值