iScroll怎么用不了

使用iscroll，无法正常滑动的原因

iscroll的dom元素的结构是固定的,swiper是容器,scroll是需要滚动的容器,list是滚动的内容 <div class="swiper"> <div class="scroll"> <div class="list"></div> </div> </div> tips: 1.swiper定位必须为relative,并且高度设置固定值,overflow:hidd

前言在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ③ 偶尔导致头部消失,头部可不是fixed哦由于以上问题,加之去年我们团队的工作量极大,和中间一些组织架构调整,这个事情一直被放到了今天,心里一直对此耿耿于怀,因为IScroll让人忘不了的好处小钗坚信,IScroll可以带来前端体验上的革命,因为他可以解决以下问题区域滑动顺滑感的体验

使用 iscroll 实现焦点图无限循环

现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscroll,仿照iscroll官方文档的demo,迅速做了一个焦点图自动滚动的例子,但……是……问题来了,iscroll的官方文档中没有说怎么实现无限循环,不会吧,应该有吧,我抱着怀疑的心态,找啊找,官方文章找了好几个版本,每个版本都看了1.2遍,没有……真的没有……啊,那怎么办…….看来只能自己想了,可

iscroll.js 下拉刷新和上拉加载

html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title></title> <link rel="stylesheet"

H5基于iScroll实现下拉刷新，上拉加载更多

前言前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据. 使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加. 3.上拉加载更多请求后台时

iscroll总结

iScroll基本信息官网:http://cubiq.org/iscroll-4 更新:2012.07.14 版本:v4.2.5 兼容:iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile. 下载iScroll4.2.5 iScroll的历史之所以iscroll会诞生,主要是因为无论是在iphone.ipod.android 或是更早前的移

iscroll

在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版本还需要经过审核才能通过,这就使得版本的更新受到很大的限制,而如果我们改用网页来展示,那么只要改变服务器中网页的内容,那么就等于修改了APP的内容展示,有更灵活的满足更新版本. 概述但是有一点就是,如何让web实现的页面,看起来更像是原生的APP呢,首先要想办法解决的就是下拉刷新的功能,对于这个功

【IScroll深入学习】突破移动端黑暗的利器（上）

前言在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ③ 偶尔导致头部消失,头部可不是fixed哦由于以上问题,加之去年我们团队的工作量极大,和中间一些组织架构调整,这个事情一直被放到了今天,心里一直对此耿耿于怀,因为IScroll让人忘不了的好处小钗坚信,IScroll可以带来前端体验上的革命,因为他可以解决以下问题区域滑动顺滑感的体验

滚动条美化实践（原生js，iscroll，nicescroll）

近期需要改造项目中的滚动条,使原滚动条在三大浏览器下表现相同,分享一下自己的改造经历: 项目中的滚动条分布在网页的各个小窗口中,使用的是-webkit-scrollbar制作,在-webkit内核的浏览器下表现非常漂亮,但是在ie和火狐下无法兼容,还是非常丑的默认样式. 原计划使用css hack打个补丁美化一下,想到ie hack以后变色的默认滚动条,觉得浑身"蓝瘦香菇".于是决定重写一下这个部分,反正以后用到的地方可以直接拿出来用. 第一次计划打算自己手写,反正逻辑挺简单的,设定个

jquery——移动端滚动条插件iScroll.js

官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来自定义滚动条以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够

iscroll 加载不全解决方案

例如上图中,get_kaijiang 中如果执行一段ajax跨域传输的话 function get_kaijiang(){ ajax------- $('#div').append(html); ----- } 如果这样执行的话iscroll就加载不全,因为ajax默认 async: true(执行方式为异步);在ajax还没有执行完就先执行了后面的请求操作,所以在执行get_kaijiang方法时还没有执行到 $('#div').append(html); 就先执行了 myScroll.re

引用iScroll.js实现上拉和下拖刷新

使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加. 3.上拉加载更多请求后台时就相当于分页请求数据,这时候需要在ajax请求时发送pageIndex参数,而初始化加载时需要从后台返回一个pageCount以便前台判断. 4.最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(p

iscroll双重滚动，向上滚动隐藏一部分，下拉后显示

最近项目需求:下面是页面,当用户向上滚动时候,[隐藏的]部分也向上滚动直至消失,这时候[标题]和[搜索框]在最顶部,而[内部的]可以继续滚动,而当[内部的]滚动到最顶部时候,也就是[这个是内部1]时候,[隐藏的]也下拉出来主要是思路是考虑用两个iscroll,一个从[隐藏]部分一直到下面(.bigScroll),一个是包含[内部]的滚动(.smallScroll),当bigScroll滚动的bigScroll.y等于bigScroll.maxScrollY时候,注销bigScroll(bigS

iscroll 下拉刷新功能

版本号:iscroll4.2.5.js iscroll 版本很有关系在线: demo链接有出现白屏的bug,将iscroll版本改成iscroll4.2.5就可以了 html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="

浅谈一下关于iscroll的使用心得

因为最近的项目所有页面老板想做成苹果原生那种上下拉动有回弹效果的体验,浏览器自带是没有这种功能的,自己写的话兼容性可能会出大问题,要适配安卓的各种机型实在是难,所以我还是选择去使用移动端相对比较稳定的iscroll.js这个插件来实现.. 刚开始使用的是iscroll4的版本,确实坑很多,但又没办法,只要一点一点来填.后来项目快做完了,问题也解决的差不多了,听到群里面有人开始在使用iscorll5的版本,性能还不错,就是兼容性不强,低版本的安卓机可能体验很不流畅,于是自己开始琢磨,就有了这篇文章

iscroll修改

近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域时,很容易触碰到这种区域,这时用户将觉得页面很卡. Google搜了一下,看来很多人都为这个问题而烦恼.有高人给出了解决方案,在这里可以找到. 代码如下: myScroll = new iScroll('scrollpanel', { // other options go here...

iScroll知识点

1.如果你有一个复杂的DOM结构,最好在onload事件之后适当的延迟,再去初始化iScroll.最好给浏览器100或者200毫秒的间隙再去初始化iScroll. 2.iScroll作用于滚动区域的外层.在上面的例子中,UL元素能进行滚动.只有容器元素的第一个子元素能进行滚动,其他子元素完全被忽略. 3.脚本需要知道滚动区域的高度和宽度.

Iscroll解析

做了一些移动端的产品,发现一些滚动效果很多会使用 iscroll 作为底层库(如阿里小蜜).iscroll 的文档已经好久没更新了,而且比较简单,经常需要直接读源码.这里写一篇总结,作为对 iscroll API的整理.而 iscroll 的库 probe,lite,zoom,infinite 和标准库等多个版本,而 probe 是平时运用的比较多的一个库,除了 iscroll 的标准库之外,还有 snap(广义翻页) 功能.这里主要以 probe 做整理.去掉里面的 scrollbars/in

iscroll.js 移动端手触滚动效果。

function loaded() { var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});}window.addEventListener("load",loaded,false); http://www.gafish.net/api/iScroll.html http://www.cnblogs.com/aaronjs/p/3147470.html

【iScroll源码学习04】分离IScroll核心

前言最近几天我们前前后后基本将iScroll源码学的七七八八了,文章中未涉及的各位就要自己去看了 1. [iScroll源码学习03]iScroll事件机制与滚动条的实现 2. [iScroll源码学习02]分解iScroll三个核心事件点 3. [iScroll源码学习01]准备阶段 4. [iScroll源码学习00]模拟iScroll 我们学习源码的目的绝不是学习人家的源码,而是由高手的代码里面学习思想,或者研究解决方案,就拿我们这次学习iScroll,我的目的就是 “抄袭”,我今天就针

【iScroll源码学习03】iScroll事件机制与滚动条的实现

前言想不到又到周末了,周末的时间要抓紧学习才行,前几天我们学习了iScroll几点基础知识: 1. [iScroll源码学习02]分解iScroll三个核心事件点 2. [iScroll源码学习01]准备阶段 3. [iScroll源码学习00]模拟iScroll 今天我们来学习其事件机制以及滚动条的实现,完了后我们iScroll就学习的差不多了,最后会抽离iScroll的精华部分组成一个阉割版iScroll 并总结下iScroll的一些地方结束iScroll的学习,然后彻底扑向nodeJS了