tank0317
tank0317
# better-scroll源码分析（二）：滚动相关的核心代码 上一篇文章我们分析了better-scroll的初始化过程，同时排除多余的功能，只关心如何实现滚动的初始化。今天的重点即滚动相关的核心代码，主要是手指在屏幕上滑动开始，滑动中，滑动结束三个时间点better-scroll都做了哪些事情。 这里先明确两件事： * 文章中提到的“滑动”都是指手指或鼠标在屏幕上的滑动，提到“滚动”都是指手指滑动后页面跟着上下/左右滚动。 * 文章中提到惯性滚动，指的是，手指滑动结束后，页面依然会随着原来的滚动方向继续滚动的现象。 在进入主题之前，先做点准备工作。 * 了解`scrollTo()`方法的实现 * 了解自定义事件的实现 `scrollTo()`方法是模拟滚动的直接实现者，其他的工作主要是在计算要滚动到哪里，或者为计算滚动到哪里做准备，然而真正的滚动操作是`scrollTo()`方法承担的。另外，在滚动过程的三个时间节点会分别触发一些自定义事件，用户在使用better-sroll过程中可以通过订阅这些事件完成一些重要工作。因此这里也会简单介绍一下自定义事件的实现。 ## `scrolTo()`方法的实现 在`scrollTo()`函数内部有两个主要操作`_translate(x, y)`和`_startProbe()`。其他的操作主要是设置过渡动画时间，设置过渡动画加速度曲线，以及为了兼容不同浏览器设置transition前缀等操作，这些我们暂不关心，只看主要操作。 ```javascript BScroll.prototype.scrollTo = function (x, y, time = 0, easing = ease.bounce)...
上一篇文章里我们介绍了better-scroll滚动相关的核心代码，我们现在清楚的知道当我们的手指在屏幕上滑动的时候，better-scroll在后面都在做哪些事情。 今天我们继续看一下better-scroll是如何处理特殊的滑动操作的，如上拉下拉以及点击操作。没错，在better-scroll里点击也是一种特殊的滑动操作，我们下面会解释。 跟前一篇文章相比，今天需要阅读的代码量并不多，我们先看一下上拉下拉操作。 ## 下拉操作 在第一篇文章里我们已经介绍过better-scroll初始化过程中有一步是初始化实现滚动以外的功能。如下面我们要重点分析的上拉下拉操作。 ```javascript BScroll.prototype._initExtFeatures = function () { ... if (this.options.pullUpLoad) { this._initPullUp() } if (this.options.pullDownRefresh) { this._initPullDown() } ... } ``` 接下来的工作就是看一下，`_initPullUp()`和`_initPullDown()`两个方法具体做了哪些事情。我们这里先看一下`_initPullDown()`方法的执行过程。下拉操作相关的代码都定义在`src/scroll/pulldown.js`文件中，代码不多，我们全部拿过来。 ```javascript import {...
# better-scroll源码阅读（四）：轮播图slide相关代码 最近开发中需要使用better-scroll实现轮播图的效果，因此今天看一下better-scroll实现slide组件的相关代码。 由于今天的相关内容不多，开始写之前一直在纠结，要不要写。最后还是觉得，写这个东西不是为了给别人看的，主要还是给自己做个笔记。 直接进入正题。从哪里开始看起？ 从初始化开始。第一篇文章已经介绍过better-scroll的初始化过程，如果想用better-scroll实现slide组件，即配置项中snap不为false时。better-scroll的初始化中会多一步snap的初始化。所以我们今天就从`_initSnap()`开始。这个方法与其他snap相关的代码都放在了`src/scroll/snap.js`文件中。 ```javascript BScroll.prototype._initExtFeatures = function () { if (this.options.snap) { this._initSnap() } ... } ``` ## snap初始化过程 snap的初始化过程初看有点复杂，代码量不少，所以我们先精简一部分，看主要操作。 初始化主要做了这几件事： 1. 如果开启loop，在轮播元素最前插入最后一个元素，最后插入第一个元素。 2. 添加"refresh"事件回调，记录每个轮播页面的位置信息，滚动到第一个页面，更新threshold。 3. 添加"scrollEnd"事件回调，滑动结束后如果需要循环，悄悄滚动（过渡时间为0，用户察觉不到）到正确位置。...
# better-scroll 源码阅读笔记 better-scroll 是一款重点解决移动端（未来可能会考虑 PC 端）各种滚动场景需求的插件。由于工作中需要使用better-scroll进行开发，然而better-scroll有着非常多的配置选项和可配置的功能，因此希望通过阅读它的源码，从而在开发中能够得心应手使用。 话不多说直接进入正题。 先看一下源码的目录结构：  `example`文件夹下是项目提供的demo，对于刚开始使用better-scroll的同学非常有用。而我们主要关注`src`目录下的文件。其中`src/index.js`是代码的入口文件，`src/scroll`文件夹下是项目的核心代码，`src/util`即项目的中使用的工具方法或常量设置。 ## 入口文件 我们先来看下入口文件`src/index.js`。这个文件比较小，直接拿过来，内容如下。 ```javascript import { eventMixin } from './scroll/event' import { initMixin } from './scroll/init' import { coreMixin...
### 问题： 当 slide-item 为图片时，部分安卓机在切换图片过程中，会看到白色块闪烁的现象。 ### 答案： 判断为 andriod 时，可以给 slide options 添加 [better-scroll](http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#usetransform) 配置项：useTransition: false。 [相关 Issue #404](https://github.com/didi/cube-ui/issues/404)
见 Issue https://github.com/cube-ui/question-answer/issues/17