移动端滚动插件BetterScroll怎么用

　　介绍

这篇文章给大家分享的是有关移动端滚动插件BetterScroll怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

让滚动更流畅

在移动端,如果你使用过溢出:滚动生成一个滚动容器,会发现它的滚动是比较卡顿,呆滞的。为什么会出现这种情况呢?

因为我们早已习惯了目前的主流操作系统和浏览器视窗的滚动体验,比如滚动到边缘会有回弹,手指停止滑动以后还会按惯性继续滚动一会,手指快速滑动时页面也会快速滚动。而这种原生滚动容器却没有,就会让人感到卡顿。

BetterScroll的滚动体验

试一试BetterScroll的滚动体验吧。体验地址

可以发现,在增加惯性滚动,边缘回弹等效果之后,明显流畅,舒服了很多。那么,这些效果是怎么实现的呢?

惯性滚动

BetterScroll在用户滑动操作结束时,还会继续惯性滚动一段首。先看一下源码中的BScroll.prototype。_end函数,这是touchend、mouseup touchcancel, mousecancel事件的处理函数,也就是用户滚动操作结束时的逻辑。

BScroll.prototype._end =, function  (e), { 　　,,,… 　　,,,if  (this.options.momentum ,,, duration  & lt;, this.options.momentumLimitTime ,,, (absDistY 祝辞,this.options.momentumLimitDistance  | |, absDistX 祝辞,this.options.momentumLimitDistance)), { 　　,,,,,let  momentumX =, this.hasHorizontalScroll  ?,动量(this.x, this.startX,,,, this.maxScrollX,, this.options.bounce  ?, this.wrapperWidth :, 0,, this.options) 　　,,,,,,,,,{newX,目的地:还以为;时间:,0} 　　,,,,,let  momentumY =, this.hasVerticalScroll  ?,动量(this.y, this.startY,,,, this.maxScrollY,, this.options.bounce  ?, this.wrapperHeight :, 0,, this.options) 　　,,,,,,,,,{newY,目的地:还以为;时间:,0} 　　,,,,,newX =momentumX.destination 　　,,,,,newY =momentumY.destination 　　,,,,,time =, Math.max (momentumX.duration, momentumY.duration) 　　,,,,,this.isInTransition =1 　　,,,} 　　,,,… 　　}

以上代码的作用是,在用户滑动操作结束时,如果需要开启了惯性滚动,用动量函数计算惯性滚动距离和时间。该函数,根据用户滑动操作的速度和减速选项——惯性减速来计算滚动距离,至于滚动时间,也是一个可配置的选项。

function 动量(目前,,开始,,,,,lowerMargin, wrapperSize,,选项),{,, 　　,,… 　　let 才能;distance =, current 作用;开始 　　let 才能;speed =, Math.abs(距离),/,时间 　　,,… 　　let 才能;duration =swipeTime 　　let 才能;destination =, current  +, speed /, deceleration  *, (distance  & lt;, 0, ?, 1,:, 1) 　　,,… 　　}

边缘回弹

超过边缘时的回弹,有两个处理步骤,第一步是滚动到超过边界时速度要变慢,第二步是回弹到边界。其中,第一步是在源码的BScroll.prototype。_move函数,这是touchmove和mousemove事件的处理函数,也就是在用户滑动操作过程中的逻辑。

//, Slow  down 或是stop  if  outside  of 从而边界 　　if  (newY 祝辞,0,| |,newY  & lt;, this.maxScrollY), { 　　,,,if  (this.options.bounce), { 　　,,,,,,,newY =, this.y  + deltaY /, 3 　　,,,},{else  　　,,,,,,,newY =, newY 祝辞,0,?,0,:this.maxScrollY 　　,,,} 　　}

第二步是调用BScroll.prototype。resetPosition函数,回弹到边界。

BScroll.prototype.resetPosition =, function  (time =, 0,, easeing =, ease.bounce), { 　　,,,… 　　,,,let  y =this.y 　　,,,if  (! this.hasVerticalScroll  | |, y 祝辞,0),{ 　　,,,,,y =0 　　,,,},else  if  (y  & lt;, this.maxScrollY), { 　　,,,,,y =this.maxScrollY 　　,,,} 　　,,,… 　　,,,this.scrollTo (x, y,,,,缓解) 　　,,,… 　　以前,,}

流畅的滚动仅仅是基础,BetterScoll真正的能力在于:提供了大量通用/定制的选项选项,API的方法和事件,让各种滚动需求实现起来更高效。

如何应用于各种需求场景

下面,以结合Vue的使用为例,说一下BetterScroll在各种场景下的姿势。

普通滚动列表

比如,有如下列表:

& lt; div  ref=皐rapper",类=發ist-wrapper"比; 　　& lt;才能ul 类=發ist-content"比; 　　,,,& lt; li  @click=癱lickItem(美元事件,项目)“,类=發ist-item", v=癷tem 拷贝data"在{{项}}& lt;/li> 　　& lt;才能/ul> 　　& lt;/div>

移动端滚动插件BetterScroll怎么用