关于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 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
iview的table组件自带的过滤器实现
Jul 12 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
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
Python简单实现区域生长方式
2020/01/16 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
.net开发工程师面试题
2014/02/25 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
学党史心得体会
2014/09/05 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
机械生产实习心得体会
2016/01/22 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python