可能你的content用了异步的数据,better-scroll实例化之后content的高度还是初始时的高度,这当然无法滚动,解决方法是获取到了异步的数据之后使用refresh()更新,或是使用插件@better-scroll/observe-dom来自动更新高度, 或者observeDOM: true, 。 配置与初始化 这里我使用了better-scroll官方提供的几个插件,ObserveDOM、Mou...
bScroll.on('pullingDown', function () { _this2.setState({ before: false }); onPullDown().then(function () { _this2.isRebounding = true; bScroll.finishPullDown(); setTimeout(function () { _this2.setState(_this2.initState); _this2.isRebounding = false; bScroll.refresh(); }, ...
就在我准备采用传统的通过监听滚动条位置刷新的时候,发现了个不错的插件BetterScroll,这是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。 尽管它大大的简化了需要我写的代码,我仍然踩了一些坑,于是想记录一下。 React项目中使用BetterScroll 由于官网上的示例是VUE的,所以基于React Hooks的使用我自己写了一...
就在我准备采用传统的通过监听滚动条位置刷新的时候,发现了个不错的插件BetterScroll,这是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。 尽管它大大的简化了需要我写的代码,我仍然踩了一些坑,于是想记录一下。 React项目中使用BetterScroll 由于官网上的示例是VUE的,所以基于React Hooks的使用我自己写了一...
在react中使用better-scroll滚动插件 最近公司使用react项目中有一些滚动的效果需要有一些插件来支持,比如iScroll,或者react-scroll,最后还是选择了better-scroll文档比较友好。 进入正题: 首先当然是npm安装啦 npm install better-scroll --save 1. 安装完成后开始使用 ...
前言最近在开发公司网站项目的h5版本，技术栈是vue，为了更好的优化滚动效果，以及实现一些相关的功能，就选择使用better-scroll这个插件。觉得效果很不错，我又在自己写着玩的博客中集成了这个插件。使用经验安装（推荐安装core版本按需引入插件）yarnadd@better-scroll/core 在vue中的使用封装一个滚动组件...
`react-better-scroll` 是一个基于 React 的库,用于实现更好的滚动效果。在 React 中应用 `react-better-scroll`,可以通过以下步骤实现: 1. 首先,安装 `react-better-scroll` 和 `@babel/preset-env`: ```bash npm install react-better-scroll @babel/preset-env ...
首先,要使用React BetterScroll,我们需要在项目中安装该库。可以通过以下命令使用npm进行安装: ``` npm install react-better-scroll ``` 安装完成后,我们可以在需要的地方引入React BetterScroll组件并使用它来创建滚动容器。在React BetterScroll中,主要有两个核心组件,分别是`Scroll`和`ScrollContainer`。 `ScrollCo...
initScroll函数中初始化better-scroll实例,将外部传入的参数及其Scroll.js组件内部默认的参数 传入到better-scroll中,完成初始化。 initScroll函数中判断一些参数,如是否需要监听滚动、是否开启下拉刷新等。 下拉刷新函数_initPullDownRefresh执行 监听scroll滚动事件,在达到下拉阈值前,对pulldown-wrapper位置进行调节 ...
components/Scroll/index.tsx /** * 下拉刷新 上拉加载更多 */importReact,{forwardRef,useState,useEffect,useRef,useImperativeHandle,useMemo}from"react"importPropTypesfrom"prop-types"importBScrollfrom"better-scroll"importLoadingfrom'../loading/index';importLoading2from'../loading-v2/index';importdebouncefro...