前端通用组件、功能

前言 在中后台系统中，图片、pdf等其他文件上传并预览是非常常见的功能。一般都有通用的组件进行封装，使用时直接复用即可。

前言 上篇文章一文学会图片加载失败时设置兜底图片意外的受到了众多小伙伴的点赞和收藏，令我很开心。但在实际使用过程中发现还是有一些场景没有覆盖到，因此有了这篇文章。

最近业务给了一个非常酷炫的需求，实现起来也踩了很多可坑、想了很多办法、做了很多优化。最后的结果还是蛮不错的，非常的丝滑，所以写一篇文章来记录自己的心得。

随着网速的不断加快和硬件性能的不断提升，页面中使用各种各样的图片已经很普遍了。现在已经很少能见到图片缓慢加载出来的效果，或是图片加载失败显示系统默认的裂开图片。

跑马灯是前端常见的一种需求。听着高大上，其实就是控制一段文字在一个容器范围内的移动。根据业务场景的不同有多种变化，但是本质上离不开transition、animation、requestAnimat。

如何实现一个根据不同屏幕宽度，高度跟随背景图片高度不断自适应的div，即根据图片宽高比实现高度自适应。

这篇文章是我个人在项目中针对业务所提出的页面返回需求所给出的最终解决方案，可能不具备通用性，但也是自己的一点理解。

上一篇文章介绍了URL Scheme拦截和JSBridge注入，这篇文章主要介绍如何在使用上述方式通信时获得回调。

上一篇文章介绍了Hybird和Webview，这一篇介绍Native与web之间跨端通信的两种方式： URL Scheme拦截 JSBridge注入。

Hybird翻译为中文就是混合的意思，在前端领域表示混合开发模式。什么是混合开发模式？为什么会存在这种开发模式？在了解这些之前，我们要先对移动端的发展史有一定的了解。

loading是我们工作中非常常用的功能，有没有想过自己实现一个loading？如果是一个带进度条的loading又要怎样实现呢？本篇文章教你如何用svg实现一个简单的带进度条的loading。

为什么要静态资源预加载？ 静态资源文件主要指的就是图片，我们在项目中用到最多的静态资源文件也是图片。但是图片作为一种可替换元素，在使用时有很多的问题。 在了解图片问题之前，先看看发生在我身上的真实小故

当打开一些具有背景遮罩层的组件或内容，类似于弹窗、协议、提示，或者弹出一个广告时我们希望在弹窗打开的时候页面禁止滑动，在弹窗关闭的时候页面恢复滚动......

这样的功能非常常见，比如拼多多首页的展示以及支付宝点击基金进去的基金市场都。实现起来其实没有那么复杂，使用swiper做简单配置即可。

移动端开发过程中，当有滚动时往往会出现一个自带的滚动条。通常情况下这个滚动条为我们提供了便利，但有时候也想去掉他，通过单纯的css样式又不能做到所有机型全兼容...

经过前面的逻辑，已经可以实现基本的切换功能，接下来就是收尾的工作。 精简提炼代码 此时整个页面的代码已经非常多了，为了更好地理解和便于阅读以及使用，我将基础模式封装了一个配置初始化的函数。

经过上述的流程后，在useEffect中拿到计算好的selectValue，年、月、日所对应的slide以及初始化index，并使用useState进行赋值后，openPicker已经可以正确的显示出

根据不同模式下所传的参数，将月份和天数在最小年、最大年和普通年几种情况下分别计算。并在满足要求的其他情况下进行特殊处理。

确定好初始变量之后，对swiper输入的props格式进行校验。然后计算出他们所对应的最小日期、初始日期、最大日期。并生成年份slide和index。

在工作过程中date-picker作为常用的时间选择器经常被用到，发现大多是都是使用Jquery去写的，这次自己尝试使用react写一个date-picker。