Skip to content

soluteli/react-bscroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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