关于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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
ant design实现圈选功能
Dec 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
JavaScript中的其他对象
2008/01/16 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
javascript动态加载二
2012/08/22 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
python实现bucket排序算法实例分析
2015/05/04 Python
linux下python抓屏实现方法
2015/05/22 Python
python递归实现快速排序
2018/08/18 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
CSS3实现时间轴特效
2020/11/02 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
职工趣味运动会方案
2014/02/10 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
荆州古城导游词
2015/02/06 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
超市食品安全承诺书
2015/04/29 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python