![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
移动开发
文章平均质量分 79
萌萌的卡洛奇
这个作者很懒,什么都没留下…
展开
-
移动端效果之swiper
写在前面在做移动端方面运用到了饿了么的vue前端组件库,不满足于只用在表面,故想深入了解一下实现原理。1. 说明父容器overflow:hidden;,子页面transform:translateX(-100%);width:100%;2. 核心解析2.1 页面初始化由于所有页面都在手机屏幕左侧一个屏幕宽度的位置,因此最开始的情况是页面中看不到任何一个子页面,所以第一步应该设置应该显示的子页面,默认原创 2017-10-09 12:53:57 · 1753 阅读 · 0 评论 -
移动端效果之IndexList
写在前面接着前面的移动端效果讲,这次讲解的的是IndexList的实现原理。效果如下:代码请看这里:github移动端效果之swiper移动端效果之picker移动端效果之cellSwiper1. 核心解析总体来说的原理就是当点击或者滑动右边的索引条时,通过获取点击的索引值来使左边的内容滑动到相应的位置。其中怎样滑动到具体的位置,看下面分解:1.1 基本html代码<div class="index原创 2017-10-20 09:38:13 · 1731 阅读 · 0 评论 -
移动端效果之CellSwiper
写在前面接着之前的移动端效果讲解,刚好项目中需要使用到这一效果,去饿了么的组件库看了一下效果,发现效果和微信端的cellSwiper还是有点差别的,由于项目中又是使用的React,之前使用的React所有组件都是自己一个字母一个字母码起来的(想来也是辛酸),所以结合之前的swiper,道理类似,实现了类似微信端的抽拉效果。代码看这里:github移动端效果之Swiper移动端效果之Picker1.原创 2017-10-13 12:53:36 · 1357 阅读 · 0 评论 -
移动端效果之Picker
写在前面接着前面的移动端效果的研究,这次来看看picker选择器的实现原理移动端效果之Swiper代码看这里:github1. 核心解析1.1 基本HTML结构<!-- 说明: 1. 类 picker-3d 是为了提供3d视角,如果不需要可以去掉 2. 类 picker-slot-absolute 在3d视角中需要加上,因为下面相对定位的 picker-items 是要相对原创 2017-10-10 18:08:03 · 6235 阅读 · 0 评论 -
移动端效果之ScrollList
写在前面列表一直是展示数据的一个重要方式,在手机端的列表展示又和PC端展示不同,毕竟手机端主要靠滑。之前手机端之前一直使用的IScroll,但是IScroll本身其实有很多兼容性BUG,想改动一下需求也很不容易,可以看我之前写的这一文章IScroll那些事——内容不足时下拉刷新(这里并不是说IScroll不好,里面对手机、浏览器兼容性都做了大量的处理,只是当遇到bug时或者想改一下需求时不时特别方便原创 2017-11-20 10:22:00 · 3782 阅读 · 0 评论 -
移动端APP列表点透事件处理方法
关于点透事件这里不再赘述,如果不清楚的可以上网搜一搜,或者看小火柴的这篇文章。这里是自己在做移动端时,在列表滑动的时候,遇到的点透问题。出现这个问题的来由是因为在转场的时候,各个手机的转场效果不一样,有的比较好,但是在有些低端机上,转场显得有点卡,于是就把过渡效果去掉了,因此就是直接的路由切换。【具体事件具体分析,可能我遇到的问题并不适合你,这里只是贴出来共享】先看下面两张图片:原创 2018-01-22 10:27:42 · 1697 阅读 · 0 评论 -
关于React中状态保存的研究
在使用react搭配react-router做应用的时候,你可能遇到这样的问题,当我从第一个页面过渡到第二个页面,然后返回之后,发现之前的页面的状态全部不见了,即回到了初始的状态。这点在页面存在多个TAB页或者多条件筛选的时候体验会更加明显,这时候我又不得不点击我之前选择的页签,重新选择筛选条件,然后再进行搜索。因此,在这种情况下,保存之前的状态显得尤为亟待解决,下面是自己实践出来的几种方法,原创 2018-01-17 19:38:22 · 4873 阅读 · 0 评论