Better-Scroll

1.Better-Scroll

better-scroll 是一款重點解決移動端(現已支持 PC 端)各種滾動場景需求的插件。它的核心是借鑑的 iscroll 的實現,它的 API 設計基本兼容 iscroll,在 iscroll 的基礎上又擴展了一些特徵以及做了一些性能優化。

better-scroll 是基於原生 JS 實現的,不依賴任何框架。 

手冊地址:http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/

2.使用說明

new BScroll(wrapper,{

        配置信息

    })

使用better-scroll注意點:

better-scroll默認滑動的是wrap下的第0個子元素;

使用better-scroll時wrap必須有一個固定高度;

3.Better-Scroll製作幻燈片

3.1-配置信息

    - scrollX

    - scrollY

    - snap:{

        loop:true||false

        threshold:0-1

    }

    - eventPassthrough: vertical|horizontal

 

3.2- 相關方法:

    - getCurrentPage()

    - next()

    - prev()

 

3.3- 相關事件:

    - scrollEnd

    - beforeScrollStart

    - touchEnd

 

4.Better-Scroll製作選擇器

4.1- 配置信息

    wheel:{

        selectedIndex:0,

        adjustTime:400,

        rotate: 36,

        wheelWrapperClass: 'list',

        wheelItemClass: 'list-item'

    }

 

4.2- 相關方法:

    - getSelectedIndex

 

4.3- 相關事件:

    - scrollEnd

 

5.Better-Scroll製作indexList

5.1- 配置信息

    probeType

 

5.2- 相關方法:

    - scrollToElement

 

5.3- 相關事件:

    - scroll

 

6.Better-Scroll製作上滑加載

6.1- 配置信息

    pullUpLoad: {

        threshold: 50

    }

6.2- 相關方法:

    - finishPullUp

            - openPullUp

            - closePullUp

6.3- 相關事件:

    - pullingUp

 

7.Better-Scroll製作下拉刷新

7.1- 配置信息

    pullDownRefresh : {

        threshold: 50, // 當下拉到超過頂部 50px 時,觸發 pullingDown 事件

        stop: 20 // 刷新數據的過程中,回彈停留在距離頂部還有 20px 的位置

    }

7.2- 相關方法:

    - finishPullDown

    - openPullDown

    - closePullDown

7.3- 相關事件:

    - pullingDown


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章