关于better-scroll插件的无法滑动bug(2021通过插件解决)


Posted in Javascript onMarch 01, 2021

better-scroll滚动原理

关于better-scroll插件的无法滑动bug(2021通过插件解决)

wrapper作为父容器,它的高度会随着内容的大小而撑高。那么,当
content的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了
BetterScroll 默认处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略
所以也给定了如下页面结构

<div class="wrapper">
 <ul class="content">
  <li>...</li>
  <li>...</li>
  ...
 </ul>
 <!-- 这里可以放一些其它的 DOM,但不会影响滚动 -->
</div>

所以我们在这里只说最重要的一点!!!

因为图片需要加载,所以better-scroll的初始化时机非常重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,如果图片还没有加载完成就已经开始初始化,那么计算出的实际高度和你的真实高度就会有大量偏差(网速也会影响。。。)

这是目前所有使用者会出现无法滚动的最大原因

我前几天遇到这个问题,并且better-scroll文档无法访问,github上的文档只有大概使用,找解决方法找了整整一天,网上的各种方法层出不穷,最优解:

通过插件:better-scroll/observe-dom

动态计算 BetterScroll 的可滚动高度或者宽度,你并不需要自己在高度或者宽度发生变化的时候,手动调用 refresh() 方法。插件通过 MutationObserver 帮你完成了

如果当前你的浏览器不支持 MutationObserver,会降级使用 setTimeout。

使用

安装依赖 npm install @better-scroll/observe-dom

import BScroll from '@better-scroll/core'
import ObserveDom from '@better-scroll/observe-dom'
BScroll.use(ObserveDom)

const bs = new BScroll('.wrapper', {
 observeDOM: true
})

这个问题还有很多解决办法,但网上很多文章讲也没有讲清,使用这个插件就好了

别的解决办法大概思路就是:监听图片加载调用refresh()重新计算高度

vue用img标签,用@load="定义一个方法"监听图片加载事件,只要图片加载一个就会调用一次你定义的方法

最后在方法中写入this.scroll.refresh()就可以做到加载一个图片刷新一次重新计算高度,同时你需要使用防抖函数避免频繁的重复调用带来的各种问题

到此这篇关于(2021通过插件解决)better-scroll插件的无法滑动bug的文章就介绍到这了,更多相关better-scroll插件无法滑动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
canvas绘制七巧板
Feb 03 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
js实现简单的随机点名器
Sep 17 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 #Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
three.js 实现露珠滴落动画效果的示例代码
Mar 01 #Javascript
详解js创建对象的几种方式和对象方法
Mar 01 #Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
vue实现拖拽进度条
Mar 01 #Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 #Vue.js
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
浅析php header 跳转
2013/06/17 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
汇科协同Java笔试题
2012/03/31 面试题
给全校老师的建议书
2014/03/13 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏