资讯专栏INFORMATION COLUMN

BetterScroll:可能是目前最好用的移动端滚动插件

layman / 2441人阅读

摘要:是一款重点解决移动端各种滚动场景需求的开源插件地址,有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,等功能。为了满足这些功能,通过使用惯性滚动边界回弹滚动条淡入淡出来确保滚动的流畅。贝瑟尔函数可以去看看,他让动画不再那么突兀。

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slider等功能。
为了满足这些功能,better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。同时还支持很多API和事件,具体支持的事件可以查看官网讲的非常详细。
由于它基于原生JavaScript 实现,不依赖任何框架,所以既可以原生 JavaScript 引用,也可以与目前前端 MVVM 框架结合使用,比如,其官网上的示例就是与 Vue 的结合。

如何使用:

再讲如何使用的之前,我们先来了解一下他的滚动原理:在浏览器中的滚动中,当内容的高度高于外边容器的高度的时候也就出现了滚动条,我们可以通过使用滚动条来看到超出的部分.

better-scroll的原理正是基于这里,内容部分的宽度/高度必须大于外部宽度/高度。所以在使用
的时候外部容器的需要设置固定宽度,还有一个问题需要设置overflow:hidden,这是因为为了隐藏超出部分。然后就是什么时候对better-scroll进行初始化,这个有点麻烦,但是所幸,作者已经在vue框架下进行封装,我们只需要像个麻瓜一样往里边填东西就行了。但是有一点需要注意:滚动的元素只能是第一个容器的第一个元素。源码如下:

  // this.scroller就是滚动的内容,this.wrapper是容器
    this.scroller = this.wrapper.children[0]

如果我们需要滚动多个内容怎么办呢,就用一个元素将其包裹住,让他成为容器的第一个子元素就行了。如何使用讲完了,我们来讲讲源码,毕竟这是一个源码解析的文章

核心代码: 1、scrollTo

scrollTo()函数是better-scroll非常核心的一个函数,事实上我们在调用scrollToElement的
时候,内部进行的操作还是scrollTo函数

   BScroll.prototype.scrollTo = function (x, y, time=0, easing = ease.bounce) {
        // useTransition是否使用css3 transition,isInTransition表示是否在滚动过程中
        // this.x表示translate后的位置或者初始化this.x = 0
        this.isInTransition = this.options.useTransition
        && time > 0 && (x !== this.x || y !== this.y)

        // 如果使用的transition,就调用一系列transition的设置,默认是true
        if (!time || this.options.useTransition) {
            this._transitionProperty()
            this._transitionTimingFunction(easing.style)
            this._transitionTime(time)
            // 这个函数会更改this.x
            this._translate(x, y)

            // time存在protoType表示不仅在屏幕滑动的时候, momentum 滚动动画运行过程中实时派发 scroll 事件
            if (time && this.options.probeType === 3) {
                // 这个函数的作用是派发scroll事件
                this._startProbe()
            }

            // wheel用于picker组件设置,不用管
            if (this.options.wheel) {
                if (y > 0) {
                    this.selectedIndex = 0
                } else if (y < this.maxScrollY) {
                    this.selectedIndex = this.items.length - 1
                } else {
                    this.selectedIndex = Math.round(Math.abs(y / this.itemHeight))
                }
            } else {
                // 进行动画this._animate
                this._animate(x, y, time, easing.fn)
            }
        }
    };

我们来依次看看这个函数,其中简单的操作用代码注明,也就不做太多的描述,其中例如this._transition这种有关transform的都是改变他的位置而已,这里我需要说明一下,我们在制作轮播图的时候,别去使用transform这种方法来做轮播图,因为当我们需要获取transform属性值的时候,你会获取到的值是一个非常奇怪的矩阵,得到translateX或者translateY的值是一件非常痛苦的事,可以看看作者是如何获取transform的值的,

matrix = matrix[style.transform].split(")")[0].split(", ")
            x = +(matrix[12] || matrix[4])
            y = +(matrix[13] || matrix[5])

我是一脸蒙蔽,要是你觉得你水平很高当我没说。this.options.probeType这个probeType配置表明的是我们需要在什么情况下派发scroll事件,在better-scroll的原理中是默认阻止浏览器的默认行为的,那我们是如何派发事件的呢?

  export function tap(e, eventName) {
        let ev = document.createElement("Event")
        ev.initEvent(eventName, true, true)
        e.target.dispatchEvent(ev)
    }

创建一个element,然后初始化,然后派发事件,我们就可以像addEventListener("click", fn, false)这样的方式来监听事件addEventListener(eventName, fn, false)。这儿有一个参数叫easing,我们来看看easing是什么
下面是一个easing的一个选项:

 bounce: {
        style: "cubic-bezier(0.165, 0.84, 0.44, 1)",
        fn: function (t) {
            return 1 - (--t * t * t * t)
        }
    }

可以看到easing通过贝瑟尔函数,和fn让我们的动画显得不是那么僵硬。贝瑟尔函数可以去看看,他让动画不再那么突兀。

2、refresh函数

在实际开发中,有时候从后端请求到数据后,我们dom结构发生变化,所以需要调用refresh方法,来看看他是什么玩意

BScroll.prototype.refresh = function () {
    // return getBoundingRect getRect()
    let wrapperRect = getRect(this.wrapper)
    this.wrapperWidth = wrapperRect.width
    this.wrapperHeight = wrapperRect.height

    let scrollerRect = getRect(this.scroller)
    this.scrollerWidth = scrollerRect.width
    this.scrollerHeight = scrollerRect.height

    const wheel = this.options.wheel
    // wheel用于picker组件设置
    if (wheel) {
        this.items = this.scroller.children
        this.options.itemHeight = this.itemHeight = this.items.length ? this.scrollerHeight / this.items.length : 0
        if (this.selectedIndex === undefined) {
            this.selectedIndex = wheel.selectedIndex || 0
        }
        this.options.startY = -this.selectedIndex * this.itemHeight
        this.maxScrollX = 0
        this.maxScrollY = -this.itemHeight * (this.items.length - 1)
    } else {
        // 允许滑动的距离
        this.maxScrollX = this.wrapperWidth - this.scrollerWidth
        this.maxScrollY = this.wrapperHeight - this.scrollerHeight
    }

    // 滚动原理容器的宽度小于scroller的宽度
    // scrollX设置为true表示可以横向滚动
    this.hasHorizontalScroll = this.options.scrollX && this.maxScrollX < 0
    this.hasVerticalScroll = this.options.scrollY && this.maxScrollY < 0

    // 如果水平不存在的话
    if (!this.hasHorizontalScroll) {
        this.maxScrollX = 0
        this.scrollerWidth = this.wrapperWidth
    }

    if (!this.hasVerticalScroll) {
        this.maxScrollY = 0
        this.scrollerHeight = this.wrapperHeight
    }

    this.endTime = 0
    // 移动方向
    this.directionX = 0
    this.directionY = 0
    // return el.offsetLeft
    // el.offsetLeft是距离父容器的距离
    // el.getBoundingClientRect()返回的是距离页面的距离
    this.wrapperOffset = offset(this.wrapper)

    // 切换到refresh事件
    this.trigger("refresh")

    // 重置位置
    this.resetPosition()
}

当我们的dom结构发生变化的时候,我们就需要重新计算父容器和容器的大小了,这样就可以重新渲染了,这个函数没什么太难理解的部分,需要注意的是getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。他同element.style获取的有些不同getBoundingClientRect()获取到的值是相对视口左上角,意思是说在获取right值的时候,事实上是left+element.clientWidth。而且getBoundingClientRect()是只能读取,而element.style不仅能读取,还能获取。el.offsetLeft返回的距离父容器的距离,如果我们需要得到元素距离document的距离的话我们就需要这样写

export function offset(el) {
    let left = 0
    let top = 0

    while (el) {
        left -= el.offsetLeft
        top -= el.offsetTop
        el = el.offsetParent
    }

    return {
        left,
        top
    }
}

一直找到没有父元素的时候,就找到元素距离document的距离了

3、trigger函数

在better-scroll的源码中,多次用到trigger函数,我们来看看他都做了什么

 BScroll.prototype.trigger = function (type) {
        let events = this._events[type]
        if (!events) {
            return
        }

        let len = events.length
        let eventsCopy = [...events]
        for (let i = 0; i < len; i++) {
            let event = eventsCopy[i]
            let [fn, context] = event
            if (fn) {
                fn.apply(context, [].slice.call(arguments,1))
            }
        }
  }

trigger函数的作用就是切换到某个事件中,获取到事件,然后使用fn进行调用。没什么太大难度,这里想到一点能够体现es6的优越性的地方,比如a = [1,2,3] 在es5中如果我们需要获取a这个数组长度的时候,我们需要这样写

 let len = a.length

但是在es6中我们不再需要这样写了,这样写就行

let { length } = a

如果需要获取其他属性值,就麻瓜式往里边填。这里还涉及一个深拷贝的问题,数组和对象的深拷贝这里不做过多阐述。上述最重要的我认为就是这三个函数

总结:

这个better-scroll的源码条理清晰,毕竟滴滴D8的段位摆在那儿,非常适合阅读。还有一些就是我对源码分析的文章的看法。在写这个源码分析的文章的时候,我意识到一个问题,那就是不仅我自己能够看懂,以前我也写过vuex的源码分析,基本就是把代码全部贴上去,写了大概2万字,我现在觉得这种方法欠妥,正确的方式应该就是把重要的部分提取出来,最重要的引导一个思路。把代码整个贴出来,显得繁琐不说,又相当于读者自己把注释看了一遍而已,所以我认为正确的方式是弄出一个思路,读者尝试读源码的时候,能够有一个大概的概念。能够自己理清思路

至于为什么这个标题不写better-scroll的源码分析呢,我怕有些人说有些源码分析的文章就是垃圾,所以至少在字面上进行改变(逃。。。)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51570.html

相关文章

  • BetterScroll可能目前最好用的移动滚动插件

    摘要:是一款重点解决移动端各种滚动场景需求的开源插件地址,有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,等功能。为了满足这些功能,通过使用惯性滚动边界回弹滚动条淡入淡出来确保滚动的流畅。贝瑟尔函数可以去看看,他让动画不再那么突兀。 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slide...

    xiaolinbang 评论0 收藏0
  • BetterScroll可能目前最好用的移动滚动插件

    摘要:是一款重点解决移动端各种滚动场景需求的开源插件地址,有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,等功能。为了满足这些功能,通过使用惯性滚动边界回弹滚动条淡入淡出来确保滚动的流畅。贝瑟尔函数可以去看看,他让动画不再那么突兀。 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slide...

    Xufc 评论0 收藏0
  • 移动布局与适配

    摘要:实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配,不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网格中。 移动端页面适配—...

    Clect 评论0 收藏0
  • 常用插件、工具类库汇总(上)

    摘要:函数库动画库动画库,也是目前最通用的动画库。下拉框级联选择器移动端最好用的的筛选器组件联动筛选移动端最好用的的筛选器组件联动筛选颜色选择器时间选择器时间日期处理是一个解析,验证,操作和显示日期和时间的类库。 showImg(https://segmentfault.com/img/bVbjpHt?w=900&h=383); 前言 在开发中,我们经常会将一些常用的代码块、功能块进行封装,...

    txgcwm 评论0 收藏0
  • 项目开发

    摘要:前端菜鸟项目,大佬们轻喷美团外卖项目演示地址第期分享推荐上好玩容易上手的项目,帮你找到编程的乐趣。包含支持冒泡的事件框架资源模块等组件,按需选择组件,不绑架开发者。 基于 Vue 的 WebSocket 实时聊天实战项目 一个基于vue的,从前端到后端构建的项目。能让学到如何用,用到了vue全家桶,nodejs,通过webpack打包,图灵机器人,websocket等前沿知识进行构建。...

    elva 评论0 收藏0

发表评论

0条评论

layman

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<