better-scroll
Note:
1.xis not maintained. please migrate your version as soon as possible
Install
npm install better-scroll -S # install 2.x，with full-featured plugin.
npm install @better-scroll/core # only CoreScroll
import BetterScroll from 'better-scroll'
let bs = new BetterScroll('.wrapper', {
movable: true,
zoom: true
})
import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {})
CDN
BetterScroll with full-featured plugin.
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js">script>
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js">script>
let wrapper = document.getElementById("wrapper")
let bs = BetterScroll.createBScroll(wrapper, {})
Only CoreScroll
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js">script>
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js">script>
let wrapper = document.getElementById("wrapper")
let bs = new BScroll(wrapper, {})
What is BetterScroll ?
BetterScroll is a plugin which is aimed at solving scrolling circumstances on the mobile side (PC supported already). The core is inspired by the implementation of iscroll, so the APIs of BetterScroll are compatible with iscroll on the whole. What's more, BetterScroll also extends some features and optimizes for performance based on iscroll.
BetterScroll is implemented with plain JavaScript, which means it's dependency free.
Getting started
The most common application scenario of BetterScroll is list scrolling. Let's see its HTML:
- ...
- ... ...
使用webpack打包，配置babel-loader，babelrc配置如下
{
"presets": [
"env"
],
"plugins": [
"transform-runtime"
]
}
打包后的文件中使用bscroll的地方提示：Uncaught (in promise) TypeError: BScroll is not a constructor。
调试跟踪到代码
var _betterScroll = __webpack_require__(277);
var BScroll = _interopRequireWildcard(_betterScroll);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
处发现_betterScroll没有__esModule属性，所以BScroll实际上变成了{default:BScroll}。导致下面无法实际化
因为其它引用库的原因，我是没有办法使用 module:false的babel配置的。
我尝试了各种办法，但在不修改源码的基础上始终没有一个圆满的结果。
这是在我用
import * as BScroll from 'better-scroll';
的情况。而如果我换成
import BScroll from 'better-scroll';
写法的话，typescript会转换为amd格式的js代码
const better_scroll_1 = require("better-scroll");
const myscroll = new better_scroll_1.default();
引用的话，webpack打包是没有问题，但问题在于我开发的时候用的是amd方式加载的bscroll，在这种情况下使用就有问题了。
所以我做了一点修改，如果 @ustbhuangyi 认为有更好的办法，请指点。
![[New Feature] 能否实现下拉刷新时Dom复用 就像iscroll 支持的那样](https://avatars.githubusercontent.com/u/18656756?v=4)
12.9k Jan 4, 2023
4.6k Dec 10, 2022
1.1k Dec 21, 2022
5.9k Dec 31, 2022
9.6k Dec 31, 2022
1.1k Nov 25, 2022
34.3k Jan 4, 2023
1 Feb 3, 2021
5 Sep 5, 2022
12.5k Jan 4, 2023
4 Nov 4, 2021
4 Oct 9, 2022
6 Feb 12, 2022
2 Nov 19, 2022
8 Jul 27, 2022
4 Oct 21, 2022
74 Jan 2, 2023
14 Dec 14, 2022
11.7k Dec 29, 2022
1 Dec 29, 2021