一. 功能分析 二. 具体实现 1. 堆叠效果 2. 图片滑动 3. 条件成功后的滑出，条件失败后的回弹 4. 滑出后下一张图片堆叠到顶部 重新堆叠是组件最后一个功能，同时也是最重要和复杂的功能。在我们的代码里，stack-item的排序依赖绑定:style的transform…

此版本轮播图为仿照网易云音乐PC播放器上首页的轮播。 网易的轮播特殊的地方就在于，如果你滑动不相邻的两张图片，其过渡效果并不是滑动过渡，而是一个跳出过渡，此方面原理与最开始设计轮播排版时候有极大关联。 此轮播为纯react环境下的es6写法，通过对state中数组的重组排列，配…

使用li元素来模拟输入框的显示，没有别的目的，就只是为了语义化，当然你也可以使用其他任意一个元素来模拟，比如div。 使用label标签的好处在于它可以跟input的click事件关联上，一方面实现了语义化解决方案，另一方面也省去了我们通过js来唤起虚拟键盘。 将真实的输入框定…

下面三种小方法本质都是进行代码的压缩，使文件比较小。 此图为react内部组件更新原理图。 当组件的 props 和 state 改变时，React 通过比较新返回的元素 和 之前渲染的元素 来决定是否有必要更新DOM元素。当二者不相等时，则更新 DOM 元素 scu表示sho…

我们使用React开发项目的时候，基本上是单页面应用，也就离不开路由。路由看似神秘，当我们简单的模拟一下它的核心功能后，发现也就这么回事儿。本文就详细的介绍一下react-router-dom 的HashRouter的核心实现逻辑。 HashRouter是一个大的容器，它控制着…

距离第一篇《React源码解析(一)》已经过去将近4个月的时间，由于是我第一次进行源码解析相关的写作，思路和文笔还不够成熟。一百多天以来，我基于读者反馈反思这几篇文章中的不足，同时也在不断学习借鉴其他优秀作者的写作方法和写作思路。最终总结出对于自己的源码写作来说，需要改进的几点…

作者：滴滴公共前端 黄轶 在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了。 以滴滴为例，可以是这样竖向滚动的列表，如图所示： 竖向列表 也可以是横向滚动的导航栏，如图所示： 横向列表 可以打开“微信 —> 钱包—>滴滴出行”体验效果。 我们在实现这类滚动功能的时…

谁用谁知道

前段时间写了一个移动端的自适应滑动Vue导航栏组件，觉得有一定实用性，大家可能会用得到（当然有些大佬自己写得更好的话就没必要啦），于是前两天整理了一下，目前已经发布到npm和GitHub上了，点我到npm，点我到GitHub项目，有需要的同学可以在项目中npm install …