better-scroll-react

better-scroll-react

让better-scroll的使用更简单。

import BetterScroll from 'better-scroll-react'

function Index() {
	return (
		<>
			<div style={{height: 400, border: '1px solid'}}>
				<BetterScroll>
					<div style={{
						height: 600,
						background: 'red'
					}}>
						Hello better-scroll-react
					</div>
				</BetterScroll>
			</div>
		</>
	)
}

注意：better-scroll-react不是better-scroll的React实现，只是在better-scroll基础上包装了一层，让better-scroll的使用更简单：

• 可以声明式的使用better-scroll；
• 内部维护BetterScroll实例的创建和销毁；
• 内部自动创建滚动区域的wrapper，再也不用担心BetterScroll 初始化了， 但是没法滚动。

安装

npm install @better-scroll/core better-scroll-react

使用

import BetterScroll from 'better-scroll-react'

function Index() {
	return (
		<>
			<div style={{height: 400, border: '1px solid'}}>
				<BetterScroll>
					<div style={{
						height: 600,
						background: 'red'
					}}>
						Hello better-scroll-react
					</div>
				</BetterScroll>
			</div>
		</>
	)
}

better-scroll-react组件的属性以及属性默认值逻辑同better-scroll 配置项

获取BetterScroll实例

通过ref可以获取BetterScroll实例

import BetterScroll from 'better-scroll-react'
import { useEffect, useRef } from 'react'


function Index() {
	const scrollRef = useRef();
	useEffect(() => {
		scrollRef.current.on('scrollStart', () => {
			console.log('Begin scroll')
		})
	}, [])

	return (
		<>
			<div style={{height: 400, border: '1px solid'}}>
				<BetterScroll ref={scrollRef}>
					<div style={{
						height: 600,
						background: 'red'
					}}>
						Hello better-scroll-react
					</div>
				</BetterScroll>
			</div>
		</>
	)
}

插件使用

插件使用方式同better-scroll。

import BetterScroll from 'better-scroll-react'
import Pullup from '@better-scroll/pull-up'
import { useEffect, useRef } from 'react'

const plugins= [
    // 插件和插件配置
	[Pullup, { pullUpLoad: true }]
]

function Index() {
	const scrollRef = useRef();

	useEffect(() => {
		scrollRef.current.on('pullingUp', () => {
			console.log('pullingUp')
			setTimeout(() => {
				scrollRef.current.finishPullUp()
			}, 1000)
		})
	}, [])

	return (
		<>
			<div style={{height: 400, border: '1px solid'}}>
				<BetterScroll ref={scrollRef} plugins={plugins}>
					<div style={{
						height: 600,
						background: 'red'
					}}>
						Hello better-scroll-react
					</div>
				</BetterScroll>
			</div>
		</>
	)
}

插件的配置属性不能直接传给better-scroll-react组件，必须在plugins属性里传递（如上面DEMO）

属性

名称	类型	默认值	描述
addContentNode	boolean	true	是否给滚动内容包裹个div节点，处理多子节点的场景
className	string	无	wrapper容器className
style	Object	无	wrapper容器style
plugins	Array<>	无	BetterScroll插件，传入格式：[PullDown], [PullDown, {pullDownRefresh: true}]
其他属性同BetterScroll 2.0 Options

Issues

让我知道你的问题