当前位置：首页 > React

react实现betterscroll

2026-01-26 13:08:47React

实现 BetterScroll 的基本步骤

安装 BetterScroll 核心库及 React 封装版本：

npm install better-scroll @better-scroll/core

基础滚动容器实现

创建可滚动区域需固定容器高度并设置 overflow: hidden：

import BScroll from '@better-scroll/core'
import { useEffect, useRef } from 'react'

function ScrollView() {
  const wrapperRef = useRef(null)

  useEffect(() => {
    const bs = new BScroll(wrapperRef.current, {
      scrollY: true,
      click: true
    })
    return () => bs.destroy()
  }, [])

  return (
    <div style={{ height: '400px', overflow: 'hidden' }} ref={wrapperRef}>
      <div className="scroll-content">
        {/* 长列表内容 */}
      </div>
    </div>
  )
}

动态内容处理

数据异步加载时需手动刷新滚动实例：

useEffect(() => {
  const bs = new BScroll(wrapperRef.current)

  const refresh = () => bs.refresh()
  window.addEventListener('resize', refresh)

  return () => {
    bs.destroy()
    window.removeEventListener('resize', refresh)
  }
}, [dataList]) // 依赖数据变化

常用功能配置

通过配置对象启用高级功能：

new BScroll(wrapperRef.current, {
  scrollY: true,
  scrollX: false,
  freeScroll: false,
  bounce: {
    top: true,
    bottom: true
  },
  pullUpLoad: {
    threshold: 50
  },
  pullDownRefresh: {
    threshold: 50,
    stop: 40
  }
})

事件绑定示例

实现上拉加载和下拉刷新：

useEffect(() => {
  const bs = new BScroll(wrapperRef.current, {
    pullUpLoad: true,
    pullDownRefresh: true
  })

  bs.on('pullingUp', () => {
    fetchData().then(() => bs.finishPullUp())
  })

  bs.on('pullingDown', () => {
    refreshData().then(() => bs.finishPullDown())
  })
}, [])

性能优化建议

对于长列表建议使用动态渲染：

{
  dataList.slice(0, visibleCount).map(item => (
    <ListItem key={item.id} data={item} />
  ))
}

滚动位置记忆可通过以下方式实现：

react实现betterscroll

// 保存位置
const savePos = () => {
  const y = bs.y
  sessionStorage.setItem('scrollPos', y)
}

// 恢复位置
bs.scrollTo(0, Number(sessionStorage.getItem('scrollPos')))