soluteli / React Bscroll
inspired by betterscroll, and fullfilled by React
Stars: ✭ 49
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Bscroll
React Native Pagination
Animated Pagination For React Native's ListView, FlatList, and SectionList
Stars: ✭ 296 (+504.08%)
Mutual labels: react-components, scroll
Infinite Webl Gallery
Infinite Auto-Scrolling Gallery using WebGL and GLSL Shaders.
Stars: ✭ 42 (-14.29%)
Mutual labels: scroll
React Redux Idle Monitor
Higher order react component for redux-idle-monitor.
Stars: ✭ 10 (-79.59%)
Mutual labels: react-components
Remember Scroll
🎯 A plugin using localStorage to remember element scroll-position when closed the page.
Stars: ✭ 33 (-32.65%)
Mutual labels: scroll
Android scroll endless
Scroll endless for Android recyclerview
Stars: ✭ 12 (-75.51%)
Mutual labels: scroll
Hellobooks
A Single-Page Library Management App built with nodejs, express and react and redux
Stars: ✭ 37 (-24.49%)
Mutual labels: react-components
React Rewards
Package containing a few microinteractions you can use to reward your users for little things and make them smile!
Stars: ✭ 841 (+1616.33%)
Mutual labels: react-components
Ngx Infinite Scroll
Infinite Scroll Directive for Angular
Stars: ✭ 1,024 (+1989.8%)
Mutual labels: scroll
Axiom React
Axiom - Brandwatch design system and React pattern library
Stars: ✭ 41 (-16.33%)
Mutual labels: react-components
Scroll Snap Carousel
Carousel based on CSS Scroll Snap functionality
Stars: ✭ 31 (-36.73%)
Mutual labels: scroll
Create Component App
Tool to generate different types of React components from the terminal. 💻
Stars: ✭ 879 (+1693.88%)
Mutual labels: react-components
Dragscroll
micro library for drag-n-drop scrolling style
Stars: ✭ 989 (+1918.37%)
Mutual labels: scroll
Predix Ui
Un-official Predix Design System React Components
Stars: ✭ 12 (-75.51%)
Mutual labels: react-components
React Bulma Components
React components for Bulma framework
Stars: ✭ 1,015 (+1971.43%)
Mutual labels: react-components
Fuckmyscroll.js
🔮 Animated scrolling to certain point or anchor
Stars: ✭ 10 (-79.59%)
Mutual labels: scroll
React Inlinesvg
An SVG loader component for ReactJS
Stars: ✭ 952 (+1842.86%)
Mutual labels: react-components
React Atlas
Composable React components with CSS Modules.
Stars: ✭ 36 (-26.53%)
Mutual labels: react-components
React Scroll Section
React library to provide a declarative scroll to between sections
Stars: ✭ 44 (-10.2%)
Mutual labels: scroll
react-bscroll
- 本项目是better-scroll在React中的一种实现。
- 适用于移动端
Example
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
-
Scroll
的父容器必须要相对或者绝对定位,否则会导致滚动条位置出错 - 点击事件要将
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
。具体用途看选项。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].