IScroll.js 实践运用指南(二)

iscroll 的所有的属性和 api 都旨在做一件事情,就是在固定区域内滚动。

上一篇主要是描述iscroll 初始化的参数,以及如何开始初始化一个iscroll实例。
那么这篇文章是来描述如何使用 iscroll 提供的API,以及一些没有提供的功能,如何通过参数来控制iscroll
Iscroll 提供的调用方法有:

  • destroy
  • refresh
  • scrollTo
  • scrollToElement
  • scrollToPage
  • disable
  • enable
  • stop
  • zoom
  • isReady

 

destroy
顾名思义,是用来销毁你实例化的iScroll 实例,包括之前绑定的所有iscroll 事件。

 

refresh
这个方法非常有用,当你的滚动区域的内容发生改变 或是 滚动区域不正确,都用通过调用refresh 来使得iscroll 重新计算滚动的区域,包括滚动条,来使得iscroll 适合当前的dom。

 

scrollTo
这个方法接受4个参数 x, y, time, relative x 为移动的x轴坐标,y为移动的y轴坐标, time为移动时间,relative表示是否相对当前位置。

 

scrollToElement
这个方法实际上是对scrollTo的进一步封装,接受两个参数(el,time),el为需要滚动到的元素引用,time为滚动时间。

 

scrollToPage
此方法接受三个参数(pageX,pageY,time) 当滚动内容的高宽大于滚动范围时,iscroll 会自动分页,然后就能使用scrollToPage方法滚动到页面。当然,当hscroll 为false 的时候,不能左右滚动。pageX这个参数就失去效果

 

disable
调用这个方法会立即停止动画滚动,并且把滚动位置还原成0,取消绑定touchmove, touchend、touchcancel事件。

 

enable
调用这个方法,使得iscroll恢复默认正常状态

 

stop
立即停止动画

 

zoom
改变内容的大小倍数,此方法接受4个参数,x,y,scale,time 分别表示的意思为,放大的基准坐标,以及放大倍数,动画时间

 

isReady
当iscroll 没有处于正在滚动,没有移动过,没有改变大小时,此值为true

 

上一篇没有谈到snap 这个属性,而这个属性往往是需要用iscroll作滚动组件非常关键的一个属性。还记得我们的iphone 菜单滚动效果吧?当手指触摸屏幕向左拉动到一半的情况,应用菜单会自动滚动对齐到下一页。这个snap 属性就是用来实现这种效果的。

<script type="text/javascript">  
var myScroll;  
  
function loaded() {  
    myScroll = new iScroll('wrapper', {  
        snap: 'li',  
        momentum: false,  
        hScrollbar: false,  
        vScrollbar: false  
     });  
}  
  
document.addEventListener('DOMContentLoaded', loaded, false);  
</script>  

以上是官方例子的代码,展示了iscroll 滑动对齐到元素li。

snap值可以为true 或是 DOM元素的tagname,当为true 时,对齐的坐标会根据可滚动的位置和滚动区域计算得到可滑动几页。如果为tagname,则滑动会对齐到元素上。举个例子\
假设有这样一个列表,每个li 里的img 都为居中显示,maxWidth 都等于屏幕宽度,li的宽度都为屏幕的宽度,那么上面的代码就可以实现一个滚动图片组件了

<ul>  
<li>  
   <img src="img.jpg"/>  
<li>  
<li>  
   <img src="img.jpg"/>  
<li>  
<li>  
   <img src="img.jpg"/>  
<li>  
<li>  
   <img src="img.jpg"/>  
<li>  
</ul>  

总结: 我们看到iscroll 的所有的属性和 api 都旨在做一件事情,就是在固定区域内滚动。当然通过snap,我们可以很好的模拟iphone 菜单间的平滑滚动。下一节将用实际的例子来示范如何做一个iphone方式的平滑滚动。

2
蜗牛不带伞
蜗牛不带伞
发表于2018-04-26 8:08
标签 IScrollIScroll.jsjs前端 归档于 JS