- 博客(19)
- 收藏
- 关注
RSS订阅原创 react实现图片懒加载
从代码中可以看出我们是用在一个盒子内使用map方法渲染出一个图片列表，在每一个图片标签内，我们定义了两个属性分别是src和data-src，其中src中放加载中的图片如空白图片；而使用图片懒加载技术，则可以在用户滚动页面时，才加载可视区内的图片，从而提升网页性能和用户体验。图片懒加载是一种延迟加载图片的技术，在页面初次加载时，只加载可视区域内的图片，其余图片则暂时不加载，等到用户滚动页面将图展示在可视区域时在进行加载。这样可以减少初始化加载时的网络请求量，加载网页加载速度。
2023-11-21 21:04:04
438
1
原创 echarts图表怎样在react中使用
一、你可以使用如下命令通过 npm 安装 ECharts。注意：必须要给main容器设置宽高，否则图表无法显示。这样就实现了一个echarts图表。二、引入Echarts。
2023-07-19 15:37:25
247
原创 原生js实现鼠标悬停页面左下角位置，出现侧边设置容器，从左到右动画实现
【代码】原生js实现鼠标悬停页面左下角位置，出现侧边设置容器，从左到右动画实现。
2023-07-18 11:52:28
298
原创 react函数组件实现切换主题的效果
当我们点击切换主题时，需要进行一个判断，如果颜色的长度大于我们color的长度，就让他显示第一个颜色，否则执行颜色加1操作。存储两个属性，一个用来存储颜列表，另一个是控制第几个颜色的变化，默认是0。给需要变换button按钮绑定active属性。
2023-07-13 11:07:12
231
原创 react回到顶部（附加动画）
3、在 useEffect 这个hook中，监听一个滚动事件。bakcTop：是回到顶部的按钮，绑定了一个点击事件。设置一个状态控制回到顶部按钮显示与隐藏。4、点击按钮回到顶部。
2023-06-03 10:26:44
414
原创 vue导出excel表格（详细教程）
json_fields：里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号;指定接口的json内某些数据下载,若不指定，默认导出全部数据中心全部字段。DetailsForm：需要导出的数据。一、安装vue-json-excel。二、在main.js中全局引入。title：表格标题。
2023-06-03 10:21:02
1267
原创 登录页面实现随机验证码（vue）
通过在data中定义的verifyCode对象的validate()方法，如果输入正确返回true 错误返回 false。2-3.mounted方法中初始化 ‘v_container’ 为div的id。2.在登录页面中引入这个js文件。2.-4 验证输入的是否正确。2-1.定义验证对象。
2023-06-03 10:06:40
623
原创 react-router v6 路由守卫/路由拦截
封装一个高阶组件，路由鉴权高阶组件，实现未登录拦截，并跳转到登录页面，判断是否有token，如果有，就返回相对应的路由，如果没有就重定向到登录login页面。1.在router文件中封装AuthRouter.js文件。2.在router.js中引入封装的这个高阶组件。
2023-05-15 17:11:26
1775
1
原创 前端面试题
垂直外边距合并：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。合并后的几种情况：相邻块元素垂直外边距的合并。
2023-05-07 11:25:13
5499
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人