导航:首页 > 编程语言 > reactjs滑动加载
reactjs滑动加载
发布时间：2023-06-07 10:56:41A. 如何实现Reactjs 监听页面滚动事件
实现ReactJS 监听页面滚动事件，代码如下：
export class Example extends Component{ scrollHandler = this.handleScroll.bind(this); componentDidMount() { window.addEventListener('scroll', this.scrollHandler); } _handleScroll(scrollTop) { console.log(scrollTop) //滚动条距专离页面的高属度 } } handleScroll(event) { let scrollTop = event.srcElement.body.scrollTop; this._handleScroll(scrollTop); }}
B. js控制页面滚动（实例）
目标描述：多个图片排列下来，按右边的小按钮，抵达相应位置，鼠标滑动，抵达下一图，或者上一图
知识点：onmousewheel，addEventListener，scrollTo，setTimeout
过程：
1.body 宽，高钉死，100vw，100vh，overflow：hidden 使得不出现滚动条，不然不好看
2.图片放进去，排起来，（注意：默认空隙的处理，可以使用flex布局，空隙就不见了）
3.制作相对于视窗的按钮，几张图片就几个按钮，（position: fixed;计算一下高度，可以利用calc计算top使得上下居中）
4.美化一下，css写写
5.先写简单的按钮事件
6.写监听滑动事件(onmousewheel在火狐无效，DOMMouseScroll只在火狐有效)
react在componentDidMount的时候监听
7.补充写一下火狐的
9.测试检查一下。
完成啦，啦啦啦～
我的截图：
缺点：这里我是一直对页面进行监听，导致滑动过快对时候动画效果开始执行对时间延后。体现为滑动对轻，整个就流畅一点。
ps：写这种带计算带页面，我觉得是考验思维的，你可以对这里的知识点不熟练，但是你必须得能理解每一步的加加减减。
C. 如何用reactjs构建一个完整的前端页面
用reactjs构建一个完整的前端页面的步骤：
准备：React 的安装包，建议去官网下载安装
1、使用 React 的网页源码，结构大致如下：
<!DOCTYPE html><html><head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script></head><body> <div id="example"></div> <script type="text/babel"> // **用户代码 ** </script></body></html>
上面代码有两个地方需要注意。
首先，最后一个<script>标签的type属性为text/babel。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上type="text/babel"。
其次，上面代码一共用了三个库：react.js、react-dom.js和Browser.js，它们必须首先加载。其中，react.js是 React 的核心库，react-dom.js是提供与 DOM 相关的功能，Browser.js的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
2、将src子目录的js文件进行语法转换，转码后的文件全部放在build子目录。
$ babel src --out-dir build
3、渲染转换成html节点，以方便操作dom：
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
这里以插入hello world为例来说明
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example'));
4、运行结果如下：
D. 搭建reactJS 项目的时候 区分各种环境进行打包处理
首先需要安装一下 dotenv-cli
（dotenv-cli 工具提供了多环境配置的能力；其使用过程为：对不同环境设置不同的环境变量文件，通过设置前端工程执行命令加载对应的环境变量文件，即可实现多环境的配置。）
cnpm install dotenv-cli -D
配置完事后 在项目根目录下新建 例如 .env.dev .env.prod 的 test 类型文件
文件内写入 对应的环境配置内容
如 图
配置完事后 再去 package.json 文件中 修改配置如图
这样 其实就完成了 各种环境的打包配置
在webpack.config.js 中输出 配置的路径 如图
与reactjs滑动加载相关的资料
- js中csstext
- 请帖制作网站java源码
- html5中加入js
- iphone程序加密
- js里面的图片对齐
- jsonobject解析list
- 发送失败错误代码10009
- js获取div中的图片不显示不出来
- java设置过期日期
- 注册表禁止启动程序运行
- 前端程序员简历模板
- 微信小程序tips
- java线程买票案例
- java架构培训
- 解压代码选择
- 西安程序员工资
- extjsgrid删除列
- js姓名正则
- 前台中jrequestjson
- jsp的六大
- js点击按钮下载图片
- 济南java程序员工资
- 解锁后程序启动
- js操作符
- jsp的书籍推荐
- 斗地主发牌程序c语言
- svn代码提交规范
- json实现通用的下拉框
- 前端代码优化面试
- js判断手机系统版本号
- java定义变量boolean
- qq阅读hjava
- extjs复制对象
- java强制下线
- msvcr110dll程序入口点
- java在线查看pdf
- js获得粘贴的数据
- 冒险岛老物品代码
- 公众号小程序怎么制作
- js都要掌握哪些内容
- 小程序怎么登陆
- javamail发送html邮件