• 欢迎大家分享资料!前往留言板评论即可!

Better-Scroll的基本使用

合宙 模组资料网 1年前 (2021-05-15) 311次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

场景

很多时候在做移动端应用时,都需要实现滚动的开发,少数情况下会使用原生自带的scroll ,但是对于用户体验可能存在一些问题,比如:卡顿、过渡不顺畅等等。那这个时候就会想着那如何对这个需求进行开发呢?如何实现呢?大多数人应该会选择使用三方库来实现吧,少数部分人可能会自己封装一个库进行实现。那今天就来看一下better-scroll这个库吧!!!

better-scroll 是什么

better-scroll 是一款解决移动端各种滚动场景需求的插件;同时也支持pc端的需求场景开发。说到这个插件,务必提一下iscroll这个插件,因为其核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。目前最适合的前端框架Vue

安装

yarn add better-scroll

or

npm install better-scroll --save

通过import进行引入:import xx from 'better-scroll'

使用

最常见的场景就是ul > li 的展示。。。

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

better-scroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。这里要注意的是,better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。
具体使用方式:

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

ps: 这里通过querySelector进行元素的查找,但是在项目不推荐使用这种方式,推荐使用:ref 进行元素的绑定和查找,避免出现多组件同时定义同一个类名等

滚动原理

下面看一张图,了解一下better-scroll时如何实现滚动的。
Better-Scroll的基本使用

清晰可以看出来,绿色部分就是父组件,需设置固定的高度,其余为滚动元素;滚动的前提时子元素的内容高度要大于父元素的高度,否则不会滚动(ps:以下用bs代表better-scroll)

API

常用的一些api

on

on( type, fn, context)

type:事件名
fn: 回调函数
context: 上下文->this
监听当前实例上的自定义事件。如:scroll, scrollEnd, pullingUp, pullingDown等。

scroll (事件)

bs.on(“scroll”,function(){})

参数:{Object} {x, y} 滚动的实时坐标

触发时机:滚动过程中,具体时机取决于选项中的 probeType。

probeType

类型:Number
默认值:0
可选值:1、2、3
作用:有时候我们需要知道滚动的位置。当 probeType 为 1 的时候,会非实时(屏幕滑动超过一定时间后)派发scroll 事件;当 probeType 为 2 的时候,会在屏幕滑动的过程中实时的派发 scroll 事件;当 probeType 为 3 的时候,不仅在屏幕滑动的过程中,而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值,其默认值为 0,即不派发 scroll 事件。

refresh

参数: 无
触发时机:refresh 方法调用完成后。

pullUpLoad

类型:Boolean | Object
默认值:false
作用:这个配置用于做上拉加载功能,默认为 false。当设置为 true 或者是一个 Object 的时候,可以开启上拉加载,例如:

pullUpLoad: {
  threshold: 50
}

可以配置离(threshold)来决定开始加载的时机。当上拉加载数据加载完毕后,需要执行 finishPullUp 方法。见 Demo 。 了解更多的细节可以去看 example 中的 scroll 组件代码。

finishPullUp()

参数:无
返回值:无
作用:当上拉加载数据加载完毕后,需要调用此方法告诉 better-scroll 数据已加载。

注意:以下几个是较新的api,如果使用版本太旧,不能使用

observeDOM(v1.5.3+)

类型:Boolean
默认值:true
作用:会检测 scroller 内部 DOM 变化,自动调用 refresh 方法重新计算来保证滚动的正确性。它会额外增加一些性能开销,如果你能明确地知道 scroller 内部 DOM 的变化时机并手动调用 refresh 重新计算,你可以把该选项设置为 false。

autoBlur(v1.7.0+)

类型:Boolean
默认值:true
作用:在滚动之前会让当前激活的元素(input、textarea)自动失去焦点。

stopPropagation(v1.9.0+)

类型:Boolean
默认值:false
作用:是否阻止事件冒泡。多用在嵌套 scroll 的场景。

扽等。有兴趣的小伙伴可以去官网/博客去了解更多、更高级的用法。。。


转载请注明原文链接:Better-Scroll的基本使用
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址