A++这个编程语言好不好学?好学好学,很好学的。我想自学编程,好学吗?编程当然可以自学。自学编程大约需要两三个月,每天抽出两三个星期把基础全部学习一遍,其他都是建立在基础之上
iscroll.js怎么判断图片全部加载完毕,我好refresh(刷新高度);
使用iscroll.js完成上拉刷新效果的问题
加载完的时候需要重新计算元素的高度
iscroll 里面有个 refresh 方法 直接调用就可以了
具体用法为
vara=IScroll(dom,{})
a.refresh();//在内容加载完成的时候调用refresh()方法就行了
如何使用iscroll.js插件
如何使用iscroll.js插件
A-A+
前端博客•前端开发资源|移动前端开发•JavaScript|JavaScript插件•5010View0
文章目录
入门
初始化
参数配置
理解核心
滚动条
滚动的编程接口
scrollTo(x, y, time, easing)
scrollBy(x, y, time, easing)
scrollToElement(el, time, offsetX, offsetY, easing)
对齐
goToPage(x, y, time, easing)
缩放
刷新
自定义事件
按键绑定
滚动条信息
销毁
- ...
- ...
- ...
- var myScroll = new IScroll('#wrapper');
- var wrapper = document.getElementById('wrapper');var myScroll = new IScroll(wrapper);
- var myScroll = new IScroll('.wrapper');
- ...
- var myScroll; function loaded() {
- myScroll = new IScroll('#wrapper');
- }
- ...
-
- ...
- ...
- ...
- var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true});
- var myScroll = new IScroll('#wrapper', { scrollbars: true});
- myScroll.scrollTo(0, -100);
- myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
- myScroll.scrollBy(0, -10);
- var myScroll = new IScroll('#wrapper', { snap: true});
- var myScroll = new IScroll('#wrapper', { snap: 'li'});
- myScroll = new IScroll('#wrapper', { zoom: true, mouseWheel: true, wheelAction: 'zoom'});
- ajax('page.php', onCompletion);function onCompletion () { // Update here your DOM
- setTimeout(function () {
- myScroll.refresh();
- }, 0);
- };
- myScroll = new IScroll('#wrapper');
- myScroll.on('scrollEnd', doSomething);
- keyBindings: {
- pageUp: 33,
- pageDown: 34, end: 35,
- home: 36, left: 37,
- up: 38, right: 39,
- down: 40}
- myScroll = new IScroll('#wrapper');
- myScroll.on('scrollEnd', function () { if ( this.x < -1000 ) { // do something
- }
- });
- myScroll.destroy();
- myScroll = null;
这篇文章讲到了iscroll的一些使用入门、参数配置和示例,并讲到了滚动条的接口,自定义事件和销毁动作等。原文:iscroll.js的使用
入门
Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。
尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。
最佳的HTML结构如下:
iScroll作用于滚动区域的外层。在上面的例子中,UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动,其他子元素完全被忽略。
最基本的脚本初始化的方式如下:
**第一个参数可以是滚动容器元素的DOM选择器字符串**,**也可以是滚动容器元素的引用对象**。下面是一个有效的语法:
所以基本上你要么直接传递元素,要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:
注意,iScroll使用的是querySelector 而不是 querySelectorAll,所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll,你需要构建自己的循环机制。
初始化
当DOM准备完成后iScroll需要被初始化。最保险的方式是在w**indow的onload事件中启动它**。
在**DOMContentLoaded**事件中或者**inline initialization**中做也可以,需要记住的是脚本需要知道滚动区域的高度和宽度。***如果你有一些图片在滚动区域导致不能立马获取区域的高度和宽度,iScroll的滚动尺寸有可能会错误***。
为滚动起容器增加position:relative或者absolute样式。这将解决大多数滚动器容器大小计算不正确的问题。
综上所述,最小的iScroll配置如下:
**注:**如果你有一个复杂的DOM结构,最好在onload事件之后适当的延迟,再去初始化iScroll。最好给浏览器100或者200毫秒的间隙再去初始化iScroll。
参数配置
在iScroll初始化阶段可以通过构造函数的第二个参数配置它。
上面的例子示例了在iScroll初始化时开启鼠标滚轮支持和滚动条支持。
理解核心
iScroll使用基于设备和浏览器性能的各种技术来进行滚动。通常不需要你来配置引擎,iScroll会为你选择最佳的方式。
尽管如此,理解iScroll工作机制和了解如何去配置他们也是很重要的。
options.useTransform
默认情况下引擎会使用**CSStransform**属性。如果现在还是2007年,那么可以设置这个属性为false,这就是说:引擎将使用top/left属性来进行滚动。
这个属性在滚动器感知到Flash,iframe或者视频插件内容时会有用,但是需要注意:性能会有极大的损耗。
默认值:true
options.useTransition
iScroll使用**CSStransition**来实现动画效果(动量和弹力)。如果设置为false,那么将使用requestAnimationFrame代替。
在现在浏览器中这两者之间的差异并不明显。在老的设备上transitions执行得更好。默认值:true
options.HWCompositing
这个选项尝试使用**translateZ(0)**来把滚动器附加到硬件层,以此来改变CSS属性。在移动设备上这将提高性能,但在有些情况下,你可能想要禁用它(特别是如果你有太多的元素和硬件性能跟不上)。
默认值:true
*注:***如果不确定iScroll的最优配置。从性能角度出发,上面的所有选项应该设置为true。(或者更好的方式,让他们自动设置属性为true)。你可以尝试这配置他们,但是要小心内存泄漏。
滚动条
滚动条不只是像名字所表达的意义一样,在内部它们是作为indicators的引用。
一个指示器侦听滚动条的位置并且现实它在全局中的位置,但是它可以做更多的事情。
先从最基本的开始。
options.scrollbars
正如我们在基本功能介绍中提到的,激活滚动条只需要做一件事情,这件事情就是:
当然这个默认的行为是可以定制的。
滚动的编程接口
当然还可以通过编程来进行滚动。
scrollTo(x, y, time, easing)
对应存在的一个叫做myScroll的iScroll实例,可以通过下面的方式滚动到任意的位置:
通过上面的方式将向下滚动100个像素。记住:0永远是左上角。需要滚动你必须传递负数。
time 和 easing是可选项。他们控制滚动周期(毫秒级别)和动画的擦除效果。
擦除功能是一个有效的IScroll.utils.ease对象。例如应用一个一秒的经典擦除动画你应该这么做:
擦除动画的类型选项有:quadratic, circular, back, bounce, elastic。
scrollBy(x, y, time, easing)
和上面一个方法类似,但是可以传递X和Y的值从当前位置进行滚动。
上面这个语句将在当前位置向下滚动10个像素。如果你当前所在位置为-100,那么滚动结束后位置为-110.
scrollToElement(el, time, offsetX, offsetY, easing)
这是一个很有用的方法,你会喜欢它的。
在这个方法中只有一个强制的参数就是el。传递一个元素或者一个选择器,iScroll将尝试滚动到这个元素的左上角位置。
time是可选项,用于设置动画周期。
offsetX 和 offsetY定义像素级的偏移量,所以你可以滚动到元素并且加上特别的偏移量。但并不仅限于此。如果把这两个参数设置为true,元素将会位于屏幕的中间。
easing参数和scrollTo方法里的一样。
对齐
iScroll能对齐到固定的位置和元素。
options.snap
最简单的对齐配置如下:
这将按照页面容器的大小自动分割滚动条。
snap属性也可以传递字符类型类型的值。这个值是滚动条将要对齐到的元素的选择器。比如下面:
这个示例中滚动条将会对齐到每一个LI标记的元素。
下面将帮助你快速浏览iScroll提供的关于对齐的一系列有趣的方法。
goToPage(x, y, time, easing)
x 和 y呈现你想滚动到横向轴或者纵向轴的页面数。如果你需要在单个唯独上使用滚动条,只需要为你不需要的轴向传递0值。
time属性是动画周期,easing属性是滚动到指定点使用的擦除功能类型。请参考高级功能中的option.bounceEasing。这两个属性都是可选项。
myScroll.goToPage(10, 0, 1000);
上面这个例子将在一秒内沿着横向滚动到第10页。
next()
prev()
滚动到当前位置的下一页或者前一页。
缩放
为了使用缩放功能,你最好使用iscroll-zoom.js脚本。
和前面的示例一样,一个好的缩放功能的配置如下:
刷新
iScroll需要知道包装器和滚动器确切的尺寸,在iScroll初始化的时候进行计算,如果元素大小发生了变化,需要告诉iScroll DOM发生了变化。
下面将提供调用refresh方法的正确时机。
每次触摸DOM,浏览器渲染器重绘页面。一旦发生了重画我们可以安全地读新的DOM属性。重新绘制阶段不是瞬时发生的只是范围结束时触发。这就是为什么我们需要给渲染器刷新iScroll之前一点时间。
为了确保javascript得到更新后的属性,应该像下面的例子这样使用刷新方法:
这里调用refresh()使用了零秒等待,如果你需要立即刷新iScroll边界就是如此使用。当然还有其他方法可以等待页面重绘,但零超时方式相当稳定。
**注:***如果你有一个相当复杂的HTML结构,你应该给浏览器更多的执行事件,可以设置100到200毫秒的超时时间。
这通常适用于所有任务必须在DOM上进行。通常给渲染器一些执行的时间。*
自定义事件
iScroll还提供额一些你可以挂靠的有用的自定义事件。
使用on(type, fn)方法注册事件。
上面的代码会在每次滚动停止是执行doSomething方法。
可以挂靠的事件如下:
beforeScrollStart,在用户触摸屏幕但还没有开始滚动时触发。
scrollCancel,滚动初始化完成,但没有执行。
scrollStart,开始滚动
scroll,内容滚动时触发,只有在scroll-probe.js版本中有效,请参考onScroll event。
scrollEnd,停止滚动时触发。
flick,用户打开左/右。
zoomStart,开始缩放。
zoomEnd,缩放结束。
按键绑定
你可以激活keyBindings选项来支持键盘控制。默认情况下iScroll监听方向键,上下翻页建,home/end键,但这些按键绑定完全可以自定义。
你可以通过传递一个包含按键代码列表的对象来进行按键绑定。
默认的按键值如下:
当然你也可以传递字符串进行按键绑定(例如:pageUp: 'a')。只要你设置了对于的按键值,那么iScroll就会响应你的设置。
滚动条信息
iScroll存储了很多有用的信息,您可以使用它们来增强您的应用。
你可能会发现有用的:
myScroll.x/y,当前位置
myScroll.directionX/Y,最后的方向 (-1 down/right, 0 still, 1 up/left)
myScroll.currentPage,当前对齐捕获点
下面是关于处理时间的代码示例:
如果 x 位置是低于-1000 像素滚轮停止时,上述执行某些代码。请注意我用这个产品而不是 myScroll,您可以使用两个当然,但 iScroll 传递本身作为这种情况下,当触发自定义事件的功能。
销毁
在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。
js给iscroll的容器增添元素时超过了容器的高度应该怎么解决
肯定会超出高度的,因为未添加新元素时iscroll在固定的容器高度内可以自由滚动,但是当你给容器动态添加元素时,容器的高度高了,而iscroll所触及的高度还是原来的高度,导致你不能滑到最底下。解决的办法是:每次你在添加元素后,加一句对iscroll的刷新myScroll.refresh();即可各位对于iscroll.js用时有没有遇到过问题
iscroll是什么? iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js编写,不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题,兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。最新版本为iscroll4。 官方网站:iscroll4 iscroll的用武之地 1.区域滚动 我们在pc端web开发中,有时会用固定某一区域的宽度和高度,然后使用overflow:auto,使其内容在该区域内滚动。 iphone默认浏览器(mobiliscroll.js和lazyload.js的兼容(滑动时,缓冲好的图片不更新)
解决兼容问题的代码(iscroll.js 和lazyload.js 的兼容(滑动时,缓冲好的图片不更新)): onscrollmove: function(){ $("#"+id).trigger('scroll');//iscroller和loadlazy.js 图片缓冲完毕后不能及时刷新,加上这个模拟浏览器被滑动,那么图片就可以刷新了 },标签:编程语言 JavaScript 前端开发 信息技术 iscroll.js
相关文章
- 详细阅读
-
随机森林模型有没有一个具体公式,不详细阅读
python随机森林分类模型,测试集和训练集的样本数没有准确按照70%和30%分配?进行比例划分的时候 从 int 型 转化为了 float 型, float型总是会有微小的误差的,这个不是大问题。
-
用javascript或html打出下面题目的详细阅读
JavaScript代码和HTML代码?html代码是网页基本代码 JavaScript一般都是在网页上加些特效使用的 不需要的 你可以看下面这段代码 图片预览效果- www.bluege.com.cn
-
360浏览器javascript在哪改设置详细阅读
360浏览器怎么开启所有网站运行JavaScript按F12,出现界面,点击“禁用”,去掉“脚本”前面的勾,即可。我刚刚学会的。像这样:ps.在出现“您的javascript被禁用,请手动开启!”的界面
-
testB跟编程语言是一回事吗?详细阅读
B语言和C语言 有什么区别(越详细越好)不知道或者没听说过B语言的请不要凭着自己的感觉胡乱回答,误人子弟。 B语言是贝尔实验室开发的一种通用的程序设计语言,它是于1969年前后
-
推广软件费用属于信息技术服务6%吗详细阅读
信息技术服务税率信息技术服务增值税一般纳税人的增税率是6%。信息技术服务属于现代服务业,现在服务业税率为6%;从事信息技术服务增值税小规模纳税人实行的是3%的征收率。信息
-
web前端开发和后端开发哪个难度大?详细阅读
web前端和后端那个难?总得来说,IT行业的各个技术岗位入门都不难,但若想深入发展,那么就需要多下苦功夫了。 很多小伙伴喜欢从代码量来区分前后端这几个大类岗位的难易程度,以此排
-
javascript 问题详细阅读
JavaScript问题假如这个外部定义了的话那么他算是全局变量,只是在这个代码块改变了变量值。没有加var声明的浏览器默认全局变量varx=0
functiontest(){
x=10
}
test()
consol -
零基础的小白学那个编程语言,最容易详细阅读
零基础入门学习什么编程语言比较好如果你想学习编程,虽然选择第一门编程语言与你想用它来做什么最终达到什么目的有很大的关系,但是事实上某些编程语言的确比其他语言要好学。
-
JavaScript详细阅读
javascript是啥JavaScript是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,J