首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动效果之ScrollList

写在前面 列表一直是展示数据的一个重要方式,在手机的列表展示又和PC展示不同,毕竟手机主要靠滑。...之前手机之前一直使用的IScroll,但是IScroll本身其实有很多兼容性BUG,想改动一下需求也很不容易,可以看我之前写的这一文章IScroll那些事——内容不足时下拉刷新(这里并不是说IScroll...不好,里面对手机、浏览器兼容性都做了大量的处理,只是当遇到bug时或者想改一下需求时不时特别方便,毕竟是一个这么大的库)。...下面主要是阅读了饿了么UI组件库mint-ui然后编写出来的效果图: ?...代码请看这里:github 移动效果之swiper 移动效果之picker 移动效果之cellSwiper 移动效果之IndexList 1 核心解析 1.1 整体思路图 ?

1.1K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    移动效果之CellSwiper

    写在前面 接着之前的移动效果讲解,刚好项目中需要使用到这一效果,去饿了么的组件库看了一下效果,发现效果和微信的cellSwiper还是有点差别的,由于项目中又是使用的React,之前使用的React...所有组件都是自己一个字母一个字母码起来的(想来也是辛酸),所以结合之前的swiper,道理类似,实现了类似微信的抽拉效果。...代码看这里:github 移动效果之Swiper 移动效果之Picker 移动效果之IndexList 移动效果之scrollList 1....做一个效果之前,我们先需要分析一下我们应该怎么做,这样才能有的放矢。...重点在于拿到一个效果之后如何分析,只有有清晰的分析思路才能针对这个分析来给出合理的解决方案。这里仅仅记录自己做这个效果的历程,拿出来共享,希望对大家有所帮助。

    1.2K60

    移动效果之Picker

    写在前面 接着前面的移动效果的研究,这次来看看picker选择器的实现原理 移动效果之Swiper 移动效果之CellSwiper 移动效果之IndexList 移动效果之scrollList...因为毕竟是移动,滑动不可避免。这次,源码中的对滑动事件进行了封装,兼容了PC以及排除了拖动和选择造成的影响,具体看一下分析。...` /** * draggable.js * 只是起到一定的兼容性 * 实质和直接调用 el.addEventListener('touchstart', startFn); 并没有多大差别...event.changedTouches[0] || event.touches[0] : event); } } 要是DOM跟随自己在手机屏幕上的滑动而滑动,方法大同小异,无非就是在开始滑动记录开始位置...这点可以参看前面一篇文章移动效果之Swiper,这篇文章中有着相同的方法。

    2K40

    移动效果之Swiper

    写在前面 最近在做移动端方面运用到了饿了么的vue前端组件库,因为不想单纯用组件而使用它,故想深入了解一下实现原理。后续将会继续研究一下其他的组件实现原理,有兴趣的可以关注下。...移动效果之Picker 移动效果之CellSwiper 移动效果之IndexList 移动效果之scrollList 代码在这里:戳我 or github 1....核心解析 2.1 页面初始化 由于所有页面都在手机屏幕左侧一个屏幕宽度的位置,因此最开始的情况是页面中看不到任何一个子页面,所以第一步应该设置应该显示的子页面,默认情况下defaultIndex:0 function...child.classList.add('is-active'); } }); pages = aPages; } 2.2 容器滑动开始(onTouchStart) 在低版本的android手机上...有一个细节就是,在滑动中transition的效果置为空,是为了防止在滑动中上一页与下一页因为过渡存在而位移得不自然,在滑动结束后再给他们加上动画效果

    1.3K80

    移动页面按手机屏幕分辨率自动缩放的js

    ,在手机的样式也会因此大乱,在页面头部加入以上一段js之后,在手机就可以正常显示了, var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度,750是按iphone6...来设计(根据自己使用需求来修改),即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应手机效果。...试想,浏览器如果把电脑的980px的网页展现在宽度为750px的iphone6手机屏上,势必会放不下,手机横向会出现滚动条,怎么阻止这种情况呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如...; opera:850px; Andriod webkit:800px; IE:974px; 然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑页面没有出现横向滚动条...(所以现在不建议写该属性了) 想实现target-densitydpi=device-dpi的效果有什么方法?

    5.4K80

    移动车牌离线识别效果

    手机拍照识别车牌是指通过计算机视觉、图像处理与模式识别等方法从车辆图像中提取车牌字符信息,从而确定车辆身份的技术。手机拍照识别车牌分为车牌定位、字符分割、字符识别三大部分。...手机拍照识别车牌技术的识别率在白天能达到99%以上,夜间95%以上;识别速度在不超过1秒,集成于移动警务通中,通过设备摄像头拍摄车牌自动识别车牌号,能够节省一半以上的车牌录入时间。...手机拍照识别车牌技术核心五大特点: 1....农用车牌、教练车牌、大使馆等各种规格牌照; 2.识别速度快:极致优化的车牌定位和识别算法; 3.整牌识别率高:尤其汉字识别摇摇领先同类产品; 4.车牌宽度要求低:车牌宽度≧50个像素,都不影响识别; 5.手机拍照识别车牌采用纯...移动车牌离线识别技术是一款成熟的安卓手机拍照识别车牌,可以看到它支持的车牌类型很多,而且对摄像头像素要求不高,所以集成手机拍照识别车牌软件的时候方便了很多。

    1.1K20

    移动轮播图效果实现

    *宽度 js代码 window.addEventListener('load',function(){ //1....,接下来需要实现无缝滚动 无缝滚动 原理很简单,当滚动到最后一张图片(克隆的第一张图片)的时候,我们快速跳到第一张图片的位置继续滚动即可 不过需要注意的是我们使用了过渡效果,如果我们直接跳转会有过渡效果这样用户会很明显的感觉到...// 无缝滚动实现 if(index>=3){ index=0 ul.style.transition = 'none'/*跳转去掉过渡效果...小圆点高亮实现 这里我们要用到一个新的属性---classList classList属性是HTML5新添加的一个属性,可以返回元素的类名,不过ie10以上才支持 但是我们是做移动所以不用考虑ie的问题...li高亮 ol.children[index].classList.add('current') }) }) 手动拖放元素 接下来我们实现手指拖放元素,通过手指控制图片位置,要用到两个移动的事件

    1.6K10

    原生JS实现移动滑动反弹

    就是类似于 PC的滚动事件,但是在移动是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: ? 1. 准备工作 什么是移动的 Touch事件?...在移动 Touch事件可以细分成三种,分别是: touchstart、 touchmove和 touchend,并且 touch事件必须要用 addEventListener去监听。...基本结构 此案例模拟的是移动的一种滑动菜单效果。...再次滑动 上面的效果图,细心的朋友可能已经发现了问题,在第一次的时候,得到了我们想要的效果,但是在第二次的时候,我们继续向下移动了一段距离,但是 ul并没有接着第一次的位置继续向下,而是瞬间跳了上去。...maximum-scale=1.0, minimum-scale=1.0">    移动

    10.4K20
    领券