基本介绍

better-scroll是什么?

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

为什么要使用better-scroll?

• 优雅的滚动：为移动端（已支持 PC）各种滚动场景提供丝滑的滚动效果。
• 零依赖：基于原生 JS 实现的，不依赖任何框架。完美运用于 Vue、React 等 MVVM 框架。
• 插件灵活：提供了插件机制，便于对基础滚动进行功能扩展。

为什么要做这个？

• 学习React Hooks的使用(暂未使用hooks相关知识)
• 提高自己的前端开发技能
• 学习如何分享以及增强自己的演说能力

实践内容

react: 16.8.6

better-scroll: 2.0.0-bate.2

• 基础组件Scroll开发
• Slider 组件开发
• Sticky 组件开发
• SlideMenu
• CascaMenu
• Pullup
• PullDown

接下来我会以视频的方式，来讲解如何开发这些组件。

srr, 由于工作关系，暂时不更新视频和bug修复，

Online Demo

遇到的问题

create-react-app 项目在 npm run build 后， index.html 的路径 /static/xxx 导致资源找不到

info

在public/index.html中的注释说道

Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the public folder during the build. Only files inside the public folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running npm run build.

使用了％PUBLIC_URL％的路径在构建期间，它将被public文件夹的URL替换，HTML只能引用public文件夹中的文件。

官方还在项目中注入了process.env.PUBLIC_URL环境变量，同样引用到public目录，具体可以查看官方文档 - Using the Public Folder和到config/env.js中查找先关内容。

Useful for resolving the correct path to static assets in public. For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />. This should only be used as an escape hatch. Normally you would put images into the src and import them in code to get their paths.

解决办法:

在package.json中增加这一条属性即可

// package.json
{
  "homepage": "."
}

参考资料

BetterScroll 2.x官方文档