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