react-bscroll

1. 本项目是better-scroll在React中的一种实现。
2. 适用于移动端

Example

1. demo
2. 源码

Install

npm install react-bscroll -S

OR

yarn add react-bscroll

Usage

// 根据文件相对路径引入
import Scroll from 'react-bscroll'
import 'react-bscroll/lib/react-scroll.css'
...

render () {
  return (
    <div className="container">
        <Scroll>
          ...list
        </Scroll>
      </div>
    </div>
  )
}

Tips

1. Scroll的父容器必须要相对或者绝对定位，否则会导致滚动条位置出错
2. 点击事件要将click设置为true

API

具体选项的含义请参考Better-Scroll中文文档

选项

| 属性 | 类型 | 默认值 | 说明 |
| ---- | ---- | ---- | ---- |
| probeType | Number | 3 | 我们需要知道滚动的位置， 当probeType为0：不派发滚动事件；为1：非实时（屏幕滑动超过一定时间后）派发scroll 事件； 为2：实时的派发 scroll 事件； 为 3 ：屏幕滑动的过程中和momentum 滚动动画运行过程中实时派发 scroll 事件 | | click | Boolean | false| better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件。但是自定义的 click 事件会阻止一些原生组件的行为，如 checkbox 的选中等，所以一旦滚动列表中有一些原生表单组件，推荐的做法是监听 tap 事件（暂未实现tap）或者 在需要click的原生Dom添加orginEvent类名 |
| scrollY | Boolean | true | 默认允许Y轴滚动 | | scrollX | Boolean | false | 默认阻止X轴滚动 | | bounce | Boolean | true | 是否开启回弹 | | disabled | Boolean | false | 是否禁用 better-scroll | | stopPropagation | Boolean | false | 默认不阻止事件冒泡 | | scrollbar | Boolean | false | 默认显示滚动条，有fade消失的效果（默认值也可以设置为Obeject，暂未实现） |
| pullDownRefresh | Boolean or Object | Object | 这个配置用于做下拉刷新功能，当设置 Object 的时，可以配置更多的具体细节。demo，无此需求时请设置为false | | pullUpLoad | Boolean or Object | Obejct | 这个配置用于做上拉加载功能，若为Object时可以配置一些具体的参数，demo，无此需求时请设置为false | | pullUpLoadMoreData | Function | null | 上拉加载时触发的异步加载数据的方法,需要返回一个resolved状态的Promise来刷新BetterScroll,demo| | doPullDownFresh | Function | null | 下拉加载时的回调函数,需要返回一个resolved状态的Promise来刷新BetterScroll。demo| | doScroll | Function | null | 滚动时的触发回调函数 | | doScrollStart | Function | null | 滚动开始时的触发事件 | | doScrollEnd | Function | null | 滚动结束时的操作 | | isPullUpTipHide | Boolean | true | 主要用于在上拉加载可用时，若列表数据不足一页，则要隐藏底部提示；若超过一页则显示。 |

方法

react-scroll只提供了一个获取better-scroll实例的方法：getScrollObj
通过该方法可以获取better-scroll实例，从而可以调用实例的方法。具体方法API点击这里

// 根据文件相对路径引入
import Scroll from 'react-bscroll'
import 'react-bscroll/lib/react-scroll.css'
...

compoentDidMount () {
  // 获取实例
  this.scrollObj = this.refs.scroll.getScrollObj()
}

render () {
  return (
    <div className="container">
        <Scroll ref='scroll'>
          ...list
        </Scroll>
      </div>
    </div>
  )
}

修复问题

同一页面多次引入调用<Scroll></Scroll>组件会有BUG，新增每个<scroll></scroll>初始化时唯一ID。

新增3个配置项

bounce,disabled,stopPropagation。具体用途看选项。