6.3 优化滑动列表
最后更新于:2022-04-01 23:34:16
# iscroll
[http://cubiq.org/iscroll-5](http://cubiq.org/iscroll-5)
它是什么?
* 模拟原生滚动小姑
它能干什么?
* 表格滚动
* 下拉刷新
* 图片左右滑动展示
### 版本说明
针对iScroll的优化。为了达到更高的性能,iScroll分为了多个版本。你可以选择最适合你的版本。 目前我们有以下版本:
* iscroll.js,这个版本是常规应用的脚本。它包含大多数常用的功能,有很高的性能和很小的体积。
* iscroll-lite.js,精简版本。它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
* iscroll-probe.js,探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。(我正在做更多的测试,这可能最终在常规iscroll.js脚本,请留意)。
* iscroll-zoom.js,在标准滚动功能上增加缩放功能。
* iscroll-infinite.js,可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。
特别熟的时候在考虑使用定制版本
打开demo/simple
### html
copy html
~~~
~~~
记住#wrapper,它是核心
### css
另外就是css,把里面的css都copy到iscroll.css里,在html里引入即可
### js
~~~
~~~
调用方式
~~~
~~~
改成zepto的domready里
~~~
$(function(){
alert('dom ready');
loaded () ;
});
~~~
这样就完成了基本操作
[http://127.0.0.1:3010/demo/helloworld-iscroll.html](http://127.0.0.1:3010/demo/helloworld-iscroll.html)
![](https://i5ting.github.io/wechat-dev-with-nodejs/weui/1.png)
### 关于selector
iscroll.js 249行
~~~
this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
~~~
### iscroll默认屏蔽了部分点击事件
比如你在#wrapper内部放a标签或button的click事件是绑定补上的。需要配置
~~~
myScroll = new IScroll('#wrapper', {
mouseWheel: true,
click: true
});
~~~
### 其他选项和事件回调
选项和方法
* 各种动画,外观,滚动条等
* 下拉刷新
* 无限滚动
* 分页indicator
* 跳转到某页
事件回调(用生命周期去理解)
* beforeScrollStart,在用户触摸屏幕但还没有开始滚动时触发。
* scrollCancel,滚动初始化完成,但没有执行。
* scrollStart,开始滚动
* scroll,内容滚动时触发,只有在scroll-probe.js版本中有效,请参考onScroll event。
* scrollEnd,停止滚动时触发。
* flick,用户打开左/右。
* zoomStart,开始缩放。
* zoomEnd,缩放结束。
对比一下[jquery插件](https://github.com/i5ting/i5ting.jquery.tab/blob/master/example/index.html)
~~~
$('.wrap1').i5ting_jquery_tab({
fix_height :'200px',
tab_changed:function(current_index){
console.log(current_index);
}
});
~~~
### 总结
* html
* css
* js
';
iScroll
- Pretty row 1 ...
- Pretty row 50