ISCROLL - 技术教程文章
iscroll.js的上拉下拉刷新时无法回弹的解决方法_javascript技巧
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题：在iOS的浏览器中，上拉或下拉刷新时，当手指划出屏幕后，页面无法弹回。很多人因为解决不了这个问题，干脆就那样不解决了，还有的直接就不用HTML了，使用原生代替HTML页面。 相信很多朋友也有自己的解决办法，只是没写出来，所以网上都搜不到解决方案。在很多QQ群里面也有很多人在问该怎么解决这个问题，所以我写这篇文章记录一下我的解决方案，希望对一些朋友有所...
jQueryiScroll.js移动端滚动条美化插件第1/5页_jquery【图】
jQuery iScroll.js 移动端滚动条美化插件第1/5页_jquery官网：http://cubiq.org/iscroll-5demo:滚动刷新：http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ Carousel demoiScroll功能很强大，目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项。一、用法iScroll对要滚动的元素进行初始化，且不限制一个页面中使用iScroll的元素个数。使用iScroll时，DOM树的结构要足够简单，...
学习使用jqueryiScroll.js移动端滚动条插件_jquery
大家在日常工作中最常用的插件是什么，jQurey？Lazyload？但是这些都是在PC端，但是在移动端最常用的插件莫过于iScroll了，iScroll到底是什么东西，应该怎么用？iScroll是个很强大的插件，我也只是略懂皮毛，这里我们简单的介绍一下。 iScroll的产生： iScroll的产生完全是因为移动版webkit浏览器，例如在iPhone，Android 的移动设备上。 iScroll的使用方法： iScroll的原理是外层有一个溢出隐藏（overflow:hidden;）的DOM，然后这...
jQueryMobile开发中日期插件Mobiscroll使用说明_jquery【图】
近期在移动方面的开发，使用jQuery Mobile ，移动方面的插件不如Web 方面的插件多，选择的更少，有一些需要自己去封装，但功力尚不足啊。 日期插件JQM也提供了内置的，但样式方面不好看，只好百度、Google啦，找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好，性能方面有点卡 mobiscroll 性能方面比前者要好一些，效果更简洁 ，划动更流畅 放在一起对比下各位看官，你们觉得哪个好看...
JQuery插件iScroll实现下拉刷新，滚动翻页特效_jquery【图】
JQuery插件：iScroll 页面布局：下拉刷新...上拉加载更多...翻页，是通过ajax请求，把页码传入一般处理程序，在一般处理程序中获得分页后的数据返回json数组对象。 下拉刷新：/*** 下拉刷新 （自定义实现此方法）* myScroll.refresh(); // 数据加载完成后，调用界面更新方法*/function pullDownAction() {setTimeout(function () { var el, li, i;el = document.getElementById('thelist');//====================================...
iScroll中事件点击触发两次解决方案_javascript技巧
之前也看了很多朋友的文章里有讲这个问题。比如使用一个变量记录执行的间隔时间什么的。感觉每次都要去撸一下，比较累人。本人喜欢搬砖前先选工具。其实解决这个方法很简单。iScroll呢其实是截获了点击浏览器时的touchstart和touchend事件。在touchend的时候使用js去触发元素的onclick事件(_end这个函数)。而在实际操作中，先执行了touchend，然后再执行了一次onclick的相关函数。这样就形成了头疼的一次点击两次触发。这本来就一个...
iscroll.js滚动加载实例详解
滚动加载是个好东西，可以解决一次加载过多的尴尬，其实就是变相的分页，总结下这个轮子的用法，挺简单的。首先是html结构：<div class=" saleRecord panelList clear" style="position:relative;height:400px;"> <div id="wrapper"> <div id="scroller"> <ul id="thelist"> @foreach (var item in ViewBag.***) { if (item.IsPay == true) { <li> <div class="panelListItemForALL"> <table class="allRecordTable"> <tbody> <tr>...
iscroll实现下拉刷新功能
本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下 版本号：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="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=...
基于iScroll实现下拉刷新和上滑加载效果【图】
本文实例为大家分享了iScroll下拉刷新上滑加载展示的具体代码，供大家参考，具体内容如下 html代码：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> <title>iScroll下拉刷新上滑加载</title> <link rel="stylesheet" href="style/main.css"/> </head> <body> <div c...
iscroll动态加载数据完美解决方法
本文实例为大家分享了iscroll动态加载数据的具体代码，供大家参考，具体内容如下 <div id="wrapper" class="margin-b90"><div id="scroller"><div id="pullDown"><span class="pullDownLabel" style="text-align: center;">加载中...</span></div><div class="sps_itemBox "><div class="list_show"><ul id="ulList"></ul></div></div><div id="pullUp"><span class="pullUpLabel" style="text-align: center;">上拉加载...</span>...
H5基于iScroll实现下拉刷新和上拉加载更多【图】
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果，脑海里第一反映就是微博那种效果，刚开始的理解有些偏差，以为下拉也是追加数据，上拉也是追加数据，后请教同事后发现其实下拉只是刷新最新数据而已，上拉是追加数据。 使用技巧 1、引用iScroll.js， 在初始化时添加两个事件监听：touchMove、DOMContentLoaded。 2、实现iScroll插件的onScrollEnd事件， 也就是在这个事件里调用你自己的ajax方...
iscroll-probe实现下拉刷新和下拉加载效果
需要注意的是外部wrapper的高度，以及all的高度，须是>100%。 附加一个css3 的loading.dengl-spinner {width: 0.682rem;height: 0.682rem;position: relative;position: absolute;z-index: -1;left: 50%;margin-left: -0.341rem;top: 2.5rem; } .dengl-spinner1{width: 0.682rem;height: 0.682rem;position: relative;position: fixed;z-index: -1;left: 50%;margin-left: -0.341rem;bottom: 1.5rem; } .dengl-cube1, .dengl-cube2...
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
三款日期选择插件推荐给大家： 1.My97DatePicker纯原生JS，专注于PC端，支持IE6+；页面上只需要引入WdatePicker.js文件，但是My97DatePicker整个目录是一个整体，最好不要破坏里面的目录结构，否则就会报错找不到指定文件。(1)直接在html文件中写入<input id="ipt" type="text" onclick="WdatePicker()" /> 注意：由于此插件是原生JS写的，所以绑定点击事件请务必请用原生JS的点击事件绑定方法，如果使用$(#ipt).on(click,function...
利用iscroll4实现轮播图效果实例代码
前言 iscroll之所以会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。相信很多人和我一样，在使用iscroll的是时候只知道可以手动滑动，不知道iscroll的轮播怎么实现，那么以下就是我做的一个轮播效果，亲测有效； 一、html代码,当然可以动态添加下面的小圆点 <div id="wrapper"><div id="scroller"><ul id="thelist"><li><strong>1.<...
移动端日期插件Mobiscroll.js使用详解【图】
mobiscroll js日期插件的基础入门案例，移动端开发过程中可能会用到。 <html><head><meta charset="UTF-8"><title>mobiscroll</title><link type="text/css" rel="stylesheet" href="../js/mobiscroll.custom-2.6.2.min.css" /></head><body><!--mobiscroll会将表单控件的value属性与插件的输入值绑定--><input id="date" name="date" /><br /><input id="time" name="time" /><br /><input type="button" value="showTime" onclic...
基于HTML5上使用iScroll实现下拉刷新，上拉加载更多【图】
前言前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果，脑海里第一反映就是微博那种效果，刚开始的理解有些偏差，以为下拉也是追加数据，上拉也是追加数据，后请教同事后发现其实下拉只是刷新最新数据而已，上拉是追加数据。 使用技巧 1、引用iScroll.js， 在初始化时添加两个事件监听：touchMove、DOMContentLoaded。 2、实现iScroll插件的onScrollEnd事件， 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和...
IScroll5 中文API参数说明和调用方法
官网：http://iscrolljs.com/ IScroll最简单的DOM结构: <div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div>初始化iscroll var myScroll = new IScroll(#wrapper,options); 初始化设置 初始化设置使用实例： var myScroll = new IScroll(#wrapper, { mouseWheel: true, scrollbars: true }); 设置列表：所属属性名说明默认值核心库croeoptions.useTransform是否使用CSS3的Transform属性trueoptions.useTransit...
iScroll.js 使用方法参考
概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器（诸如iPhone，iPad，Android 这些系统上广泛使用） 提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是，这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的 中间区域。 然而，Android系统最新修订版已经可以支持这种功能了（尽管支持的力...
jQuery iScroll.js 移动端滚动条美化插件第1/5页【图】
官网：http://cubiq.org/iscroll-5demo:滚动刷新：http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/Carousel demoiScroll功能很强大，目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项。一、用法iScroll对要滚动的元素进行初始化，且不限制一个页面中使用iScroll的元素个数。使用iScroll时，DOM树的结构要足够简单，移除不必要的标签，避免过多的标签嵌套。1、html部分1.1、...
学习使用jquery iScroll.js移动端滚动条插件
大家在日常工作中最常用的插件是什么，jQurey？Lazyload？但是这些都是在PC端，但是在移动端最常用的插件莫过于iScroll了，iScroll到底是什么东西，应该怎么用？iScroll是个很强大的插件，我也只是略懂皮毛，这里我们简单的介绍一下。 iScroll的产生： iScroll的产生完全是因为移动版webkit浏览器，例如在iPhone，Android 的移动设备上。 iScroll的使用方法： iScroll的原理是外层有一个溢出隐藏（overflow:hidden;）的DOM，然后这...
iscroll.js的上拉下拉刷新时无法回弹的解决方法
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题：在iOS的浏览器中，上拉或下拉刷新时，当手指划出屏幕后，页面无法弹回。很多人因为解决不了这个问题，干脆就那样不解决了，还有的直接就不用HTML了，使用原生代替HTML页面。 相信很多朋友也有自己的解决办法，只是没写出来，所以网上都搜不到解决方案。在很多QQ群里面也有很多人在问该怎么解决这个问题，所以我写这篇文章记录一下我的解决方案，希望对一些朋友有所...
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效【图】
经常看到在一些产品介绍页，看到全屏滚动的特效，今天推荐款jQuery插件给大家，jQuery全屏鼠标滚动切换页面特效插件multiScroll.js，支持众多的参数自定义配置，scrollingSpeed：切换速度、easing：动画效果、navigation：false是否出现导航，还支持事件Callback函数调用，onLeave、afterLoad等，效果还是和不错的，浏览器兼容方面：IE8, 9, Opera 12、以及现代的浏览器，需要浏览器支持CSS3属性，推荐学习和使用。使用方法： 1.加...
iScroll中事件点击触发两次解决方案
之前也看了很多朋友的文章里有讲这个问题。比如使用一个变量记录执行的间隔时间什么的。感觉每次都要去撸一下，比较累人。本人喜欢搬砖前先选工具。其实解决这个方法很简单。iScroll呢其实是截获了点击浏览器时的touchstart和touchend事件。在touchend的时候使用js去触发元素的onclick事件(_end这个函数)。而在实际操作中，先执行了touchend，然后再执行了一次onclick的相关函数。这样就形成了头疼的一次点击两次触发。这本来就一个...
JQuery插件iScroll实现下拉刷新，滚动翻页特效
JQuery插件：iScroll 页面布局： <div id="wrapper"><div id="scroller"><div id="pullDown"><span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span></div><ul id="thelist"><li><img src="img/page1_img1.jpg" /></li><li><img src="img/page1_img2.jpg" /></li><li><img src="img/page1_img3.jpg" /></li><li><img src="img/page1_img1.jpg" /></li><li><img src="img/page1_img2.jpg" /></li><li><...
HTML5应用开发：JavaScript库iScroll教程_html/css_WEB-ITnose
目录 1. iScroll介绍 2. 安装和使用 3. 简单的iScroll例子 4. Pinch & Zoom 5. Snap to element 6. iScroll 详细参数 1. iScroll介绍 一般我们在开发传统Web网站时，偶尔会用固定某一区域的宽度/高，然后借用设置这一区域的overflow:scroll，使得其里面超过该区域范围的内容，可以通过移动滚动条来查看。 而在iOS(iOS5以下)的mobile Safari以及Android的浏览器当中，原生不支持页面内任意区域的overflow:scroll这...
javascript document.ready并不总是有效,iscroll！【代码】
您好,我们正在使用iScroll滚动构建一个移动web.app.问题是,当页面首次加载时,iScroll滚动器有时会无法正常工作. 这是代码,我们添加了(document).ready来解决该问题,并且这样做的大部分是这样做的,但是有时似乎并不起作用. 我们的猜测是,当包装器的高度(可滚动区域)的加载速度变慢时,滚动器不起作用,这就是为什么我们添加document.ready并具有上述结果的原因.https://stackoverflow.com/<script type="text/javascript">var myScrol...
javascript-iscroll在phonegap中不起作用？如何在phonegap中使用iscroll【代码】
我已经在android phonegap中创建了应用程序.我使用iscoll在div中动态显示滚动条,因为我追加了列表并动态显示. 它显示带有附加列表的div,但不显示滚动条. 在logcat中,出现以下错误： 03月21日16：09：02.669：WARN / webview(2166)：由于我们正在等待WebCore的触地响应而错过了一次拖动. 我的代码是 我已经使用cubiq.org/iscroll-4显示滚动条 滚动条的js是<script type="text/javascript" charset="utf-8" src="iscroll.js"></scrip...
javascript-可以将iscroll pinch / zoom与div叠加使用吗？【代码】
我正在尝试在具有背景图像的较大div(“ parentContainer”)顶部覆盖特定位置的div(“ childItem”).然后,我使用iscroll允许在父div上进行缩放.这可行.但是,在缩小/缩放完成后,子div不会相对于父div的更新缩放级别保持其位置. 因此,基本上,背景图像会被缩放,但是子div的位置不会被缩放.关于使用iscroll完成缩放后如何重新定位childItem的任何想法？例：<div id="parentContainer"><img src="map_background.png" /><div id="childIt...
Javascript-在移动Web应用程序中iScroll初始化之后……文本框不可编辑
我正在HTML,css,javascript,jquery中制作移动Web应用程序.我正在初始化page上的iScroll.iScroll运行正常.页面包含文本框.在iScroll初始化后,它变得不可编辑.即使z-index在这里也没有用.解决方法:是的,还有其他选择.https://github.com/neave/touch-scroll 下载示例并放入您的文本框,然后尝试…我编辑的示例在这里http://www.mediafire.com/?uzb5wa0m5hd3dgq 触摸以滚动,您也可以编辑文本….
javascript – 如何在SwipeView中使用iScroll4？【代码】
我正在使用iScroll4在移动网站上的图像上创建水平滚动效果. iScroll非常棒,但问题是iScroll包装器中包含的图像会禁用本机垂直滚动.换句话说,在iScroll包装图像内的任何位置禁用用户的手指滑动以导航页面. SwipeView可能能够解决这个问题,但文档(至少对我来说)并不是那么清楚.有谁知道如何在iScroll包装图像上有效使用SwipeView？解决方法:很抱歉几乎重现了已经做出的答案 – 但我需要将一些代码粘贴到不同的空间. 阿拉斯泰尔的例子...