首页 > 电脑 > iscroll.js怎么判断图片全部加载完毕,我好refresh(刷新高度);

iscroll.js怎么判断图片全部加载完毕,我好refresh(刷新高度);

电脑 2023-01-16

使用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)

  • 缩放

  • 刷新

  • 自定义事件

  • 按键绑定

  • 滚动条信息

  • 销毁

  • 这篇文章讲到了iscroll的一些使用入门、参数配置和示例,并讲到了滚动条的接口,自定义事件和销毁动作等。原文:iscroll.js的使用

    入门

    Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。

    尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。
    最佳的HTML结构如下:



    • ...

    • ...

    • ...

iScroll作用于滚动区域的外层。在上面的例子中,UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动,其他子元素完全被忽略。

最基本的脚本初始化的方式如下:


  • **第一个参数可以是滚动容器元素的DOM选择器字符串**,**也可以是滚动容器元素的引用对象**。下面是一个有效的语法:

  • var wrapper = document.getElementById('wrapper');var myScroll = new IScroll(wrapper);

  • 所以基本上你要么直接传递元素,要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:

  • var myScroll = new IScroll('.wrapper');

  • 注意,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初始化阶段可以通过构造函数的第二个参数配置它。

  • var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true});

  • 上面的例子示例了在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

    正如我们在基本功能介绍中提到的,激活滚动条只需要做一件事情,这件事情就是:

  • var myScroll = new IScroll('#wrapper', { scrollbars: true});

  • 当然这个默认的行为是可以定制的。

    滚动的编程接口

    当然还可以通过编程来进行滚动。

    scrollTo(x, y, time, easing)

    对应存在的一个叫做myScroll的iScroll实例,可以通过下面的方式滚动到任意的位置:

  • myScroll.scrollTo(0, -100);

  • 通过上面的方式将向下滚动100个像素。记住:0永远是左上角。需要滚动你必须传递负数。
    time 和 easing是可选项。他们控制滚动周期(毫秒级别)和动画的擦除效果。
    擦除功能是一个有效的IScroll.utils.ease对象。例如应用一个一秒的经典擦除动画你应该这么做:

  • myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);

  • 擦除动画的类型选项有:quadratic, circular, back, bounce, elastic。

    scrollBy(x, y, time, easing)

    和上面一个方法类似,但是可以传递X和Y的值从当前位置进行滚动。

  • myScroll.scrollBy(0, -10);

  • 上面这个语句将在当前位置向下滚动10个像素。如果你当前所在位置为-100,那么滚动结束后位置为-110.

    scrollToElement(el, time, offsetX, offsetY, easing)

    这是一个很有用的方法,你会喜欢它的。
    在这个方法中只有一个强制的参数就是el。传递一个元素或者一个选择器,iScroll将尝试滚动到这个元素的左上角位置。
    time是可选项,用于设置动画周期。
    offsetX 和 offsetY定义像素级的偏移量,所以你可以滚动到元素并且加上特别的偏移量。但并不仅限于此。如果把这两个参数设置为true,元素将会位于屏幕的中间。
    easing参数和scrollTo方法里的一样。

    对齐

    iScroll能对齐到固定的位置和元素。

    options.snap

    最简单的对齐配置如下:

  • var myScroll = new IScroll('#wrapper', { snap: true});

  • 这将按照页面容器的大小自动分割滚动条。
    snap属性也可以传递字符类型类型的值。这个值是滚动条将要对齐到的元素的选择器。比如下面:

  • var myScroll = new IScroll('#wrapper', { snap: 'li'});

  • 这个示例中滚动条将会对齐到每一个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脚本。
    和前面的示例一样,一个好的缩放功能的配置如下:

  • myScroll = new IScroll('#wrapper', { zoom: true, mouseWheel: true, wheelAction: 'zoom'});

  • 刷新

    iScroll需要知道包装器和滚动器确切的尺寸,在iScroll初始化的时候进行计算,如果元素大小发生了变化,需要告诉iScroll DOM发生了变化。
    下面将提供调用refresh方法的正确时机。

    每次触摸DOM,浏览器渲染器重绘页面。一旦发生了重画我们可以安全地读新的DOM属性。重新绘制阶段不是瞬时发生的只是范围结束时触发。这就是为什么我们需要给渲染器刷新iScroll之前一点时间。

    为了确保javascript得到更新后的属性,应该像下面的例子这样使用刷新方法:

  • ajax('page.php', onCompletion);function onCompletion () { // Update here your DOM

  • setTimeout(function () {

  • myScroll.refresh();

  • }, 0);

  • };

  • 这里调用refresh()使用了零秒等待,如果你需要立即刷新iScroll边界就是如此使用。当然还有其他方法可以等待页面重绘,但零超时方式相当稳定。

    **注:***如果你有一个相当复杂的HTML结构,你应该给浏览器更多的执行事件,可以设置100到200毫秒的超时时间。
    这通常适用于所有任务必须在DOM上进行。通常给渲染器一些执行的时间。*

    自定义事件

    iScroll还提供额一些你可以挂靠的有用的自定义事件。
    使用on(type, fn)方法注册事件。

  • myScroll = new IScroll('#wrapper');

  • myScroll.on('scrollEnd', doSomething);

  • 上面的代码会在每次滚动停止是执行doSomething方法。
    可以挂靠的事件如下:

    beforeScrollStart,在用户触摸屏幕但还没有开始滚动时触发。
    scrollCancel,滚动初始化完成,但没有执行。
    scrollStart,开始滚动
    scroll,内容滚动时触发,只有在scroll-probe.js版本中有效,请参考onScroll event。
    scrollEnd,停止滚动时触发。
    flick,用户打开左/右。
    zoomStart,开始缩放。
    zoomEnd,缩放结束。

    按键绑定

    你可以激活keyBindings选项来支持键盘控制。默认情况下iScroll监听方向键,上下翻页建,home/end键,但这些按键绑定完全可以自定义。
    你可以通过传递一个包含按键代码列表的对象来进行按键绑定。
    默认的按键值如下:

  • keyBindings: {

  • pageUp: 33,

  • pageDown: 34, end: 35,

  • home: 36, left: 37,

  • up: 38, right: 39,

  • down: 40}

  • 当然你也可以传递字符串进行按键绑定(例如:pageUp: 'a')。只要你设置了对于的按键值,那么iScroll就会响应你的设置。

    滚动条信息

    iScroll存储了很多有用的信息,您可以使用它们来增强您的应用。
    你可能会发现有用的:

    myScroll.x/y,当前位置
    myScroll.directionX/Y,最后的方向 (-1 down/right, 0 still, 1 up/left)
    myScroll.currentPage,当前对齐捕获点
    下面是关于处理时间的代码示例:

  • myScroll = new IScroll('#wrapper');

  • myScroll.on('scrollEnd', function () { if ( this.x < -1000 ) { // do something

  • }

  • });

  • 如果 x 位置是低于-1000 像素滚轮停止时,上述执行某些代码。请注意我用这个产品而不是 myScroll,您可以使用两个当然,但 iScroll 传递本身作为这种情况下,当触发自定义事件的功能。

    销毁

    在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。

  • myScroll.destroy();

  • myScroll = null;

  • 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默认浏览器(mobil

    iscroll.js和lazyload.js的兼容(滑动时,缓冲好的图片不更新)

    解决兼容问题的代码(iscroll.js 和lazyload.js 的兼容(滑动时,缓冲好的图片不更新)): onscrollmove: function(){ $("#"+id).trigger('scroll');//iscroller和loadlazy.js 图片缓冲完毕后不能及时刷新,加上这个模拟浏览器被滑动,那么图片就可以刷新了 },

    标签:编程语言 JavaScript 前端开发 信息技术 iscroll.js

    大明白知识网 Copyright © 2020-2022 www.wangpan131.com. Some Rights Reserved. 京ICP备11019930号-18