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

better-scroll滚动原理

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插件无法滑动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue滚动轴插件better-scroll使用详解

    跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll,用来计算左侧menu栏对应右侧foods栏相应显示的食物区,如果不用插件就比较费事了,因此这里分享一下这个插件的简单使用: 一.项目中下载,并引入 在配置文件package.json中引入版本 "dependencies": { "better-scroll": "^0.1.7" } 然后进入项目目录,打开cmd更新配置 npm i (i是install缩写) 最后引入,比如我

  • 详解 vue better-scroll滚动插件排坑

    详解 vue better-scroll滚动插件排坑

    BetterScroll号称目前最好用的移动端滚动插件,因此它的强大之处肯定是存在的.要不...哈哈.个人感觉还是很好用的.这篇文章不是笼统的讲 BetterScroll ,而是单讲滚动,想要深入了解它,请移步这里. 滚动原理 better-scroll 是什么滚动原理 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 featur

  • vue滚动插件better-scroll使用详解

    vue滚动插件better-scroll使用详解

    本文实例为大家分享了vue滚动插件better-scroll的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件.例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等),没有滚动条显示却实现了滚动功能. 1.2 better-scroll安装 npm install better-scroll --save 安装至项目中 1.3 better-scroll使用 better-scroll常见应用场景(列表

  • vue better-scroll插件使用详解

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在 这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScroll(Dom对象, {//options startX: 0, star

  • Angular中使用better-scroll插件的方法

    better-scroll的使用 由于需要在一个固定的的高度做无限滚动,本来css的overflow-y也可以完成的,奈何安卓不是很流畅,还很生硬,就是用了第三方库better-scroll,配合angular的ng-content.angular的ng-content和vue的插槽很像,里面一些不确定的内容可以通过ng-content投影进去. 安装better-scroll 1: npm install better-scroll --save 2: 安装types npm install

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

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

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

  • typecho插件编写教程（四）：插件挂载

    终于,在能够保存配置信息后,我们可以开始编写插件的挂载功能了. 首先我们需要知道系统为我们在各个关键的环节都预留了插件点给我们,系统运行到插件点时,会检测到是否有插件挂在这个点上,然后执行插件的逻辑! 插件的工作就是找到合适的插件点,挂上去,然后执行自己的逻辑. 插件点,插件钩子,插件接口...在老高这儿是一个概念 官方的插件接口及功能列表 我们的插件需要执行的逻辑在这里,Widget_Contents_Post_Edit类的finishPublish方法 文件路径var/Widget/Cont

  • BootStrap iCheck插件全选与获取value值的解决方法

    在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了. $("#checkall").click( function(){ if(this.checked){ $("input[name='checkname']").each(function(){this.checked=true;}); }else{ $("input[name='checkname']").each(function(){thi

  • mysql滑动订单问题原理与解决方法实例分析

    mysql滑动订单问题原理与解决方法实例分析

    本文实例讲述了mysql滑动订单问题原理与解决方法.分享给大家供大家参考,具体如下: 先根据以下代码来创建表MonthlyOrders并导入一定的数据 CREATE TABLE MonthlyOrders( ordermonth DATE, ordernum INT UNSIGNED, PRIMARY KEY (ordermonth) ); INSERT INTO MonthlyOrders SELECT '2010-02-01',23; INSERT INTO MonthlyOrders SE

  • Sublime Text3安装Go语言相关插件gosublime时搜不到gosublime的解决方法

    Sublime Text3安装Go语言相关插件gosublime时搜不到gosublime的解决方法

    在windows下golang开发环境搭建时(具体步骤网上很多,百度搜索括号前的文字即可找到),遇到了很尴尬的情况(如下图),百度也没有找到想类似的情况, 解决办法 (共3步): (这也是手动安装插件的过程) 第一步: 从 工具栏--- Preferences----可以看到 Browse Package(第一个就是),打开后,即找到了插件安装路径,如: C:\Users.....AppData\Roaming\Sublime Text 3\Packages (如果有git,可用这个“简化方法”

  • 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

    40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

    在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最优秀的Javascript框架之一.以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.在这是jQuery滑动切换插件系列的第二篇,我们将向大家分享40多种非常有用,又有创意的jQ

  • 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一

    40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一

    以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.从这篇文章开始到接下来的几篇文章我们将向大家分享40多种非常有用,又有创意的jQuery图片滑动插件,及其演示和下载地址.你可以按你网页风格找到合适的jQuery图片滑动插件,然后点击演示链接查看具体效果,然后下载此jQuery滑动插件.希望你能在这40个jQuery

  • js插件实现图片滑动验证码

    js插件实现图片滑动验证码

    图片滑动验证码,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,当然下面的代码只是实现前端部分,只记录了拖动的坐标. 先上代码吧,做个备份记录 jquery.lgymove.js /** * Created by lgy on 2017/10/21. * 图片验证码 */ (function ($) { $.fn.imgcode = function (options) { //初始化参数 var defaults = { callback:"" //回调函数 }

  • js插件方式打开pdf文件(浏览器pdf插件分享)

    js插件方式打开pdf文件(浏览器pdf插件分享)

    两种方案:一种直接链接,把pdf文件当作img文件,类似<a href=""/>这种形式,这样链接: 复制代码 代码如下: <frame src="pdf文件的地址"></frame> 另一种:使用js插件哈.其中实现阅读pdf文件的js插件很多,比如:pdf.js:是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持:jsPDF:是一个使用Javascript语言生成PDF的开源库(IE暂不支持)

  • 火狐textarea输入法的bug的触发及解决

    火狐textarea输入法的bug的触发及解决

    在firefox中,如果一个textarea获取焦点,在输入法激活的状态,比如搜狗输入法,敲入一个汉字的第一个拼音的时候,如果这个时候 后台js将该textarea的value修改,那么该textarea会直接被清空,如图 在这种状态,如果js修改textarea的值,就会触发该bug, 如何解决这个问题? 经过多次尝试,发现只有在js修改value的时候,将该textarea 失去焦点,修改之后,再获取焦点即可,该bug同样适用于,input 复制代码 代码如下: $("#test"

随机推荐