糊一笑

写在前面在做移动端方面运用到了饿了么的vue前端组件库，不满足于只用在表面，故想深入了解一下实现原理。1. 说明父容器overflow:hidden;，子页面transform:translateX(-100%);width:100%;2. 核心解析2.1 页面初始化由于所有页面都在手机屏幕左侧一个屏幕宽度的位置，因此最开始的情况是页面中看不到任何一个子页面，所以第一步应该设置应该显示的子页面，默认

写在前面接着前面的移动端效果讲，这次讲解的的是IndexList的实现原理。效果如下：代码请看这里：github移动端效果之swiper移动端效果之picker移动端效果之cellSwiper1. 核心解析总体来说的原理就是当点击或者滑动右边的索引条时，通过获取点击的索引值来使左边的内容滑动到相应的位置。其中怎样滑动到具体的位置，看下面分解：1.1 基本html代码<div class="index

写在前面接着之前的移动端效果讲解，刚好项目中需要使用到这一效果，去饿了么的组件库看了一下效果，发现效果和微信端的cellSwiper还是有点差别的，由于项目中又是使用的React，之前使用的React所有组件都是自己一个字母一个字母码起来的（想来也是辛酸），所以结合之前的swiper，道理类似，实现了类似微信端的抽拉效果。代码看这里：github移动端效果之Swiper移动端效果之Picker1.

写在前面接着前面的移动端效果的研究，这次来看看picker选择器的实现原理移动端效果之Swiper代码看这里：github1. 核心解析1.1 基本HTML结构<!-- 说明： 1. 类 picker-3d 是为了提供3d视角，如果不需要可以去掉 2. 类 picker-slot-absolute 在3d视角中需要加上，因为下面相对定位的 picker-items 是要相对

写在前面列表一直是展示数据的一个重要方式，在手机端的列表展示又和PC端展示不同，毕竟手机端主要靠滑。之前手机端之前一直使用的IScroll，但是IScroll本身其实有很多兼容性BUG，想改动一下需求也很不容易，可以看我之前写的这一文章IScroll那些事——内容不足时下拉刷新（这里并不是说IScroll不好，里面对手机、浏览器兼容性都做了大量的处理，只是当遇到bug时或者想改一下需求时不时特别方便

关于点透事件这里不再赘述，如果不清楚的可以上网搜一搜，或者看小火柴的这篇文章。这里是自己在做移动端时，在列表滑动的时候，遇到的点透问题。出现这个问题的来由是因为在转场的时候，各个手机的转场效果不一样，有的比较好，但是在有些低端机上，转场显得有点卡，于是就把过渡效果去掉了，因此就是直接的路由切换。【具体事件具体分析，可能我遇到的问题并不适合你，这里只是贴出来共享】先看下面两张图片：

在使用react搭配react-router做应用的时候，你可能遇到这样的问题，当我从第一个页面过渡到第二个页面，然后返回之后，发现之前的页面的状态全部不见了，即回到了初始的状态。这点在页面存在多个TAB页或者多条件筛选的时候体验会更加明显，这时候我又不得不点击我之前选择的页签，重新选择筛选条件，然后再进行搜索。因此，在这种情况下，保存之前的状态显得尤为亟待解决，下面是自己实践出来的几种方法，