前端UI组件【免费下载链接】better-scroll:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance项目地址https://gitcode.com/gh_mirrors/be/better-scroll点击查看免费下载BetterScroll 2.x 采用「最小核心 插件化」的架构设计用户可以根据业务诉求在「基础滚动core」「增强型滚动core 插件」「全能力滚动better-scroll 全家桶」三档方案中自由选择。本文以官方文档 use.md 为主线结合仓库源码讲解三种使用方式的差异、插件注册机制与底层原理读完你即可按需搭建任意复杂度的滚动场景。三种使用方式概览BetterScroll 2.x 将能力拆分为三层选择哪一档取决于你的功能需求与对包体积的敏感度使用方式引入的包能力范围包体积基础滚动better-scroll/core仅核心滚动垂直/水平/自由滚动、回弹、惯性等最小比 1.x 压缩体积小近三分之一增强型滚动better-scroll/core 各功能插件核心滚动 按需插件pull-up、pull-down、scroll-bar 等随插件数量增长可按需控制全能力滚动better-scroll一次引入全部插件能力用法与 1.x 完全一致最大且随功能扩展持续增长官方文档明确建议除非业务确实需要全部插件能力否则推荐按需引入避免 bundle 体积失控。基础滚动只引入 core如果你只需要一个拥有基础滚动能力的列表只需要引入better-scroll/coreimport BScroll from better-scroll/core let bs new BScroll(.wrapper, { // ...... 详见配置项 })better-scroll/core是 BetterScroll 2.x 的最小使用单元其 package.json 中描述为 Minimalistic core scrolling for BetterScroll, it is pure and tiny仅依赖better-scroll/shared-utils一个包。核心类BScrollConstructor位于 BScroll.ts构造函数接收两个参数elwrapper 元素可以是 DOM 节点也可以是 CSS 选择器字符串内部通过getElement解析options配置对象与用户传入配置合并后经process()加工生效。基础滚动的三种模式官方文档在 base-scroll.md 中归纳了三种基础滚动模式垂直滚动默认scrollY默认为true可直接滚出一个纵向列表水平滚动需要scrollX: true同时对 CSS 有严格要求——wrapper 必须保证不换行white-space: nowrapcontent 的display必须是inline-blockfreeScroll水平与垂直同时滚动设置freeScroll: true后从源码 Options.ts 可以看到process()会把scrollX与scrollY强制置为true允许任意方向滚动。.scroll-wrapper // ... white-space nowrap .scroll-content // ... display inline-block核心配置项的默认值与含义从 Options.ts 的OptionsConstructor构造器中可以看到完整的默认配置以下是与基础滚动强相关的关键项配置项默认值说明scrollX/scrollYfalse/true是否开启横向 / 纵向滚动freeScrollfalse开启后同时允许 X / Y 两个方向滚动startX/startY0/0初始滚动位置bounce{top: true, right: true, bottom: true, left: true}是否回弹可传布尔或对象bounceTime800回弹动画时长msmomentumtrue是否开启惯性滚动momentumLimitTime300触发惯性的最短触摸时长msmomentumLimitDistance15触发惯性的最短触摸距离pxdeceleration0.0015惯性滚动减速度probeType0Probe.Default滚动事件探测粒度详见下文clickfalse是否派发原生 click 事件tap是否派发自定义 tap 事件useTransitiontrue是否使用 CSS3 transition 实现动画specifiedIndexAsContent0指定 wrapper 的第几个子元素作为 content2.0.4quadrantQuadrant.First父元素旋转时的交互修正2.3.0::: warning BetterScroll 实时派发 scroll 事件需要将probeType设置为 3。probeType的取值对应 shared-utils 中的Probe枚举0为默认不派发实时 scroll1为滚动过程中派发节流2与3均为实时派发3还用于插件强制实时探测。 :::增强型滚动core 按需插件如果你需要额外 feature比如pull-up需要引入对应插件并注册import BScroll from better-scroll/core import Pullup from better-scroll/pull-up // 注册插件 BScroll.use(Pullup) let bs new BScroll(.wrapper, { probeType: 3, pullUpLoad: true })注意两个关键点BScroll.use(Plugin)必须在new BScroll()之前调用配置项的键名如pullUpLoad必须与插件类上的静态属性pluginName一致否则插件无法实例化。插件注册的源码机制从 BScroll.ts 的静态方法use()可以看到完整注册流程校验插件是否已安装重复注册直接返回校验插件类是否声明了静态属性pluginName未声明时输出警告并拒绝注册将插件存入BScroll.plugins数组与pluginsMap映射表支持链式调用.use().use()。在new BScroll()时构造函数会把插件实例化到bs.plugins上插件通过scroll.proxy(propertiesConfig)将方法、属性代理到bs实例通过scroll.registerType([...])注册自定义事件类型。以 pull-up 插件 为例其static pluginName pullUpLoad与propertiesConfig中的proxy配置使你可以直接在bs上调用bs.finishPullUp()、bs.openPullUp()、bs.autoPullUpLoad()等方法并监听bs.on(pullingUp, handler)事件。另一个细节插件在handleOptions()中会把scroll.options.probeType强制设为Probe.Realtime值 3以保证滚动位置的实时探测。插件如何暴露方法、属性与事件插件中暴露的方法与属性在执行new BScroll()之后会通过Object.defineProperty代理到bs。以 zoom 插件为例import BScroll from better-scroll/core import Zoom from better-scroll/zoom BScroll.use(Zoom) const bs new BScroll(#scroll-wrapper, { freeScroll: true, scrollX: true, scrollY: true, disableMouse: true, useTransition: true, zoom: { start: 1, min: 0.5, max: 2 } }) bs.zoomTo(1.5, 0, 0) // 不用关心 zoom 插件实例直接通过 bs 获取暴露的方法 bs.on(zoomStart, zoomStartHandler) // 插件事件同样代理至 bs插件全部内置插件清单见 plugins/README.mdpulldown、pullup、scrollbar、slide、wheel、zoom、mouse-wheel、observe-dom、observe-image、nested-scroll、infinity、movable、indicators。若确实需要操作插件实例本身可通过bs.plugins获取例如bs.plugins.zoom。全能力滚动一次引入所有插件如果你觉得一个个引入插件很费事可以使用拥有全部插件能力的better-scroll包import BScroll from better-scroll let bs new BScroll(.wrapper, { // ... pullUpLoad: true, wheel: true, scrollbar: true, // and so on })它的使用方式与 1.0 版本一模一样但体积会相对大很多官方文档明确推荐按需引入。全能力包内部做了什么从 better-scroll/src/index.ts 的源码可以清楚看到这个包本质上是一个「预注册了所有插件的 core」依赖 13 个功能插件包见 better-scroll/package.json 的dependencies全部为^2.5.1版本在模块加载时依次执行BScroll.use(...)链式注册 MouseWheel、ObserveDom、PullDownRefresh、PullUpLoad、ScrollBar、Slide、Wheel、Zoom、NestedScroll、InfinityScroll、Movable、ObserveImage、Indicators 共 13 个插件同时 re-export 各插件类MouseWheel、PullUpLoad等方便需要时手动引用。因此import BScroll from better-scroll得到的对象与better-scroll/core导出的对象共用同一套插件机制只是插件已全部就位。你仍然可以直接用pullUpLoad: true、wheel: true、scrollbar: true等配置开启对应能力。安装与引入方式NPM / Yarnnpm install better-scroll/core --save # or yarn add better-scroll/core全能力包npm install better-scroll --save # or yarn add better-scrollES Module 方式webpack、Rollup 等构建工具均可从 node_modules 引入import BScroll from better-scroll/coreCommonJS 方式var BScroll require(better-scroll/scroll)script 标签加载core 支持直接通过 script 加载加载后会在window上挂载一个BScroll对象script srchttps://unpkg.com/better-scroll/corelatest/dist/core.js/script !-- minify -- script srchttps://unpkg.com/better-scroll/corelatest/dist/core.min.js/scriptlet wrapper document.getElementById(wrapper) let bs new BScroll(wrapper, {})全能力包同样支持 CDN 加载script srchttps://unpkg.com/better-scrolllatest/dist/better-scroll.js/script !-- minify -- script srchttps://unpkg.com/better-scrolllatest/dist/better-scroll.min.js/scriptlet bs BetterScroll.createBScroll(.wrapper, {})常见滚动问题排查官方文档在 base-scroll.md 的「温馨提示」中给出了两条高频问题的排查路径出现无法滚动的情况首先检查 content 元素的高度/宽度是否大于 wrapper 的高度/宽度这是内容能够滚动的前提条件。wrapper 必须有确定的尺寸且 content 必须超出 wrapper 才会产生可滚动距离。图片导致滚动不正常如果 content 中存在图片DOM 渲染时图片可能尚未下载完成导致 content 高度小于预期。此时应在图片加载完成如onload回调后调用bs.refresh()重新计算滚动距离。refresh是 core 内置事件与实例方法之一见 BScroll.ts 中注册的事件类型列表。小结纯滚动需求better-scroll/core足够体积最小需要部分增强能力better-scroll/core 按需BScroll.use(Plugin)注意pluginName与配置键名一致需要全部能力 / 从 1.x 迁移直接使用better-scroll用法与 1.x 一致但要接受更大的包体积。更详细的配置项说明可继续阅读 base-scroll-options.md插件能力清单见 plugins/README.md各插件对应的源码与示例位于 packages 目录下对应的子包中。赞分享前端UI组件【免费下载链接】better-scroll:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance项目地址https://gitcode.com/gh_mirrors/be/better-scroll点击查看免费下载相关推荐BProgress核心API解析start/done/inc方法实现进度精确控制BProgress核心API解析start/done/inc方法实现进度精确控制 BProgress是一款轻量级、可定制的进度条工具专为提升用户体验设计。本前端UI组件Flipper Authenticator CLI命令完全指南用命令行高效管理你的全部令牌Flipper Authenticator CLI命令完全指南用命令行高效管理你的全部令牌 Flipper Authenticator 是一款运行在 Flip前端UI组件10个实用案例Snowflake Arctic-Embed-L OpenMind在企业级检索系统中的应用10个实用案例Snowflake Arctic Embed L OpenMind在企业级检索系统中的应用 Snowflake Arctic Embed L O前端UI组件上一篇iOS动画用户体验度量工具Spring库的分析集成下一篇AndroidViewAnimations示例项目解析demo模块中的最佳实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考