DDR爱好者之家

关于better-scroll插件的无法滑动bug(2021通过插件解决)
站长资源 2024/12/24 佚名
34 1538
DDR爱好者之家 Design By 杰米

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()就可以做到加载一个图片刷新一次重新计算高度,同时你需要使用防抖函数避免频繁的重复调用带来的各种问题

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米