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中文文档

选项

方法

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。具体用途看选项。