1. 什么是 ts-better-scroll？
ts-better-scroll 是一个基于 better-scroll 的 TypeScript 封装版本，它可以方便地帮助开发者在 web 应用中添加区域滚动功能，结合 TypeScript 的类型检查可以更好的保证代码的可维护性。
2. ts-better-scroll 的安装与初始化
- 在项目中使用 npm 安装 ts-better-scroll：
$ npm install ts-better-scroll --save
- 在项目中引入 ts-better-scroll：
import BScroll from 'ts-better-scroll'
- 定义 better-scroll 实例：
const wrapper = document.querySelector('.wrapper')
const scroll = new BScroll(wrapper, {
scrollX: true,
click: true
})其中，wrapper 变量指向需要添加滚动功能的区域，scrollX 表示是否开启横向滚动，click 表示是否开启点击反馈。
3. ts-better-scroll 常用配置项介绍
以下是 ts-better-scroll 的常用配置项，可根据需要进行设置：
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| probeType | number | 0 | 滚动状态的回调频率，0 表示不调用，1 表示只在滚动结束时调用，2 表示滚动过程中调用 |
| scrollX | boolean | false | 是否开启横向滚动 |
| scrollY | boolean | true | 是否开启纵向滚动 |
| click | boolean | false | 是否开启点击反馈 |
| pullUpLoad | object | false | 上拉加载更多配置，详见下文 |
| pullDownRefresh | object | false | 下拉刷新配置，详见下文 |
4. ts-better-scroll 上拉加载和下拉刷新
- 上拉加载：
-- -------------------- ---- -------
------ -------- - ---------- - ---- ------------------
----- ------- - ----------------------------------
----- ------ - --- ---------------- -
-------- -----
---------- --
------ -----
------- -
---- -----
--
----------- -
---------- ---
---- -
-------- ---------
-------- -----------
------- ---------
--
------------- -- -- -
------------- -- -
---------------------
----- -- - -----------------------------
------------ -- -----------------------------------------
--------------------
-- -----
-
-
--- 下拉刷新：
-- -------------------- ---- -------
------ -------- - --------------- - ---- ------------------
----- ------- - ----------------------------------
----- ------ - --- ---------------- -
-------- -----
---------- --
------ -----
------- -
---- -----
--
---------------- -
---------- ---
---- -
-------- -------
-------- ---------
-------- ----------
--
------------------ -- -- -
------------- -- -
-----------------------
----- -- - -----------------------------
------------ - --------------------------------------------
--------------------
-- -----
-
-
--其中，threshold 变量表示触发上拉或下拉的阈值，txt 变量表示显示在滚动区域的文本信息，onPullUpLoad 和 onPullDownRefresh 分别表示触发上拉和下拉的回调函数。
5. ts-better-scroll 的其他扩展功能
ts-better-scroll 还支持多种其他的扩展功能，如：滚动到指定位置、侧边栏字母联动、缩略图功能等，具体使用方式参见官方文档。
6. 总结
ts-better-scroll 是一个功能强大，易于使用的 Web 滚动组件，通过本篇文章的介绍，你可以轻松学习 ts-better-scroll 的使用方法，并在实际项目中应用它的各种扩展功能，提高项目开发效率及代码可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb581e8991b448dc61c