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的使用更简单：

1. 可以声明式的使用better-scroll；
2. 内部维护BetterScroll实例的创建和销毁；
3. 内部自动创建滚动区域的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插件，传入格式：{plugins: [PullDown]}, 插件配置数据传入：{ plugins:[[PullDown, {pullDownRefresh: true}]] }| |其他属性同BetterScroll 2.0 Options||||

Issues

让我知道你的问题