vue表格内部上下切换

冒泡、快速、插入三种排序对应的原理

  返回  

better-scroll插件---@2.4.1

2021/7/21 19:35:44 浏览:

关于better-scroll插件的无法滑动bug

better-scroll滚动原理
在这里插入图片描述

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

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

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

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

解决办法

第一步下载最新版本并引入

yarn add @better-scroll/core 

第二步安装插件:better-scroll/observe-dom
开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后,当这些 DOM 元素发生变化时,将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性:

针对改变频繁的 CSS 属性,增加 debounce
如果改变发生在 scroll 动画过程中,则不会触发 refresh

yarn add @better-scroll/observe-dom 

使用

import BScroll from '@better-scroll/core'
import ObserveDom from "@better-scroll/observe-dom";

BScroll.use(ObserveDom);

  new BScroll('.bs-wrapper', {
    //...
    observeDOM: true // 开启 observe-dom 插件
  })

在最新版(2.4.1)中使用pullup事件需要安装插件(看个人需求)

 yarn add @better-scroll/pull-up

使用

  import BScroll from '@better-scroll/core'
  import Pullup from '@better-scroll/pull-up'

  BScroll.use(Pullup)
  
  new BScroll('.bs-wrapper', {
    pullUpLoad: true
  })

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

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

更多详情可查看官网 : https://better-scroll.github.io/docs/zh-CN/

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号