学习使用jquery iScroll.js移动端滚动条插件


Posted in Javascript onMarch 24, 2020

大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下。

iScroll的产生:

iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上。

iScroll的使用方法:

iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM,然后这个区域内的第一个DOM结构会被实例化,其包裹的内容可以纵向或者横向的滚动,所以在使用iScroll的时候,滚动元素要尽量的简单,减少DOM个数,减少嵌套,因为DOM结构越是复杂iScroll运行起来就越是吃力,有可能会造成某些节点显示不正常的情况。 所以,推荐使用的DOM结构如下:

<div id="wrapper">//overflow:hidden;
 <ul>
 //只有第一个DOM结构(ul)被实例化,这个DOM可以纵向或者横向的滚动,
 //多出的内容会被wrapper的样式hidden。
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
</div>

注意:再次重申,只有wrapper里的第一个子元素(ul)才可以被实例化滚动,并且要结合外层的DOM(wrapper)才能实现滚动。
如果 wrapper中有多个ul怎么办?很简单,记住那句话,只有wrapper里的第一个子元素(ul)才可以被实例化滚动:

<div id="wrapper">//overflow:hidden;
 <div id="first">
 //只有第一个DOM结构(ul)被实例化,这个DOM可以纵向或者横向的滚动,
 //多出的内容会被wrapper的样式hidden
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <ul>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 </ul>
 </div>
</div>

看到了吧,只有first会被实例化。 注意:这里第一个DOM结构的ID(first)可以不写,我只是为了方便大家识别才写了个ID,但是最外层的ID(wrapper)一定要写,因为在JS实例化的时候需要填写这个ID:

var myScroll = new iScroll("wrapper");

iScroll应该如何实例化

既然说道了实例化,我们应该在什么时候实例化?据说实例化的方法有很多,但是我没用过,我只说一种:
(1)在HTML(uw3c.html)页面底部(body之后html之前)加载iscroll.js与当前页面的uw3c.js,这样能确保HTML的DOM结构能加载出来。
(2)在JS插入页面DOM结构和数据之前实例化iScroll,也就是在JS的最开始实例化,因为之后可能会使用JS来插入DOM或者数据,这样以来能确保在插入数据之前iScroll已经实例化了。

HTML://HTML结构

<html >
 <body>
 ...code...
 </body>
 //插入iscroll.js文件
 <script type="text/javascript" src="js/iscroll.js" > </script >
 //插入本页面JS文件
 <script type="text/javascript" src="js/uw3c.js" > </script >
</html>

 JS://JS文件内容

var myscroll;
 function iscroll(data){
 //实例化iScroll
 myscroll=new iScroll("wrapper");
 pageData(data);
 }
 function pageData(obj){
 $("body").html(obj);
 myscroll.refresh();//当DOM结构发生变化的时候,需要刷新iScroll
 }
 iscroll("<div>pagedata</div>");

iScroll中的参数:

在实例化iScroll的时候,可以传入两个参数,第一个参数是实例化的外层的DOM的ID,第二个参数是iScroll执行方法的对象:

var myscroll=new iScroll("wrapper",{hScrollbar:false});
或者
var opts = {
 vScroll:false,//禁止垂直滚动
 snap:true,//执行传送带效果
 hScrollbar:false//隐藏水平方向上的滚动条
 };
var myscroll = new iScroll("wrapper",opts);

第二个参数内容如下,这个参数会控制iScroll的效果:

hScroll false 禁止横向滚动 true横向滚动 默认为true
vScroll false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar false隐藏水平方向上的滚动条
vScrollbar false 隐藏垂直方向上的滚动条
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true
bounce 启用或禁用边界的反弹,默认为true
momentum 启用或禁用惯性,默认为true,此参数在你想要保存资源的时候非常有用
lockDirection false取消拖动方向的锁定,true拖动只能在一个方向上(up/down 或者left/right)

iScroll中的方法:

当然在第二个参数中,也有一些方法可以执行:
(1)scrollTo(x, y, time, relative)方法:传入4个参数:X轴滚动距离,Y轴滚动距离,效果时间,是否相对当前位置。所以例如:

//在200毫秒的时间内,Y轴向上滚动100像素;
uw3c.scrollTo(0, -100, 200)
//在200毫秒的时间内,相对于当前位置,X轴向左滚动100像素;
uw3c.scrollTo(-100, 0, 200, true)

(2)refresh()方法:在DOM结构发生改变之后,需要刷新iScroll,否则滚动插件会实例化的不准确:

uw3c.refresh();//刷新iScroll

(3)onPosChange,有没有一个方法能返回位置的变化?你可以查询一下自己所用的iScroll中有没有onPosChange方法:

onPosChange:function(x,y){
 if(y < -200){
 //如果Y周向上滚动200像素,$("#uw3c")就显示,否则就隐藏。
 $("#uw3c").show();
 }else{
 $("#uw3c").hide();
 }
}

(4)onScrollEnd:滚动结束时执行的事件,如果想在滚动结束时出发摸个事件,这个方法就拍上用处了:

//滚动结束后,执行的方法,滚动后会出现提示框alert("uw3c.com")
onScrollEnd:function(){
 alert("uw3c.com");
}

(5)onRefresh:在DOM结构发生改变之后,需要刷新iScroll,否则滚动插件会实例化的不准确,onRefresh是刷新完iScroll会执行的方法。
(6)onBeforeScrollStart:开始滚动前的时间回调,默认是阻止浏览器默认行为 。
(7)onScrollStart:开始滚动的回调。
(8)onBeforeScrollMove:在内容移动前的回调。
(9)onScrollMove:内容移动的回调。
(10)onBeforeScrollEnd:在滚动结束前的回调。
(11)onTouchEnd:手离开屏幕后的回调。
(12)onDestroy:销毁实例的回调。

以上就是本文的全部内容,希望对大家熟练使用iScroll.js移动端滚动条插件有所帮助。

Javascript 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
JavaScript中的继承之类继承
May 01 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
Vue中使用Sortable的示例代码
Apr 07 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 #Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 #Javascript
javascript动态获取登录时间和在线时长
Feb 25 #Javascript
基于javascript实现动态时钟效果
Aug 18 #Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 #Javascript
灵活的理解JavaScript中的this指向
Feb 25 #Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 #Javascript
You might like
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
nginx 设置多个站跨域
2021/03/09 Servers
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
AngularJS快速入门
2015/04/02 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
Python画图高斯分布的示例
2019/07/10 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
产品销售员岗位职责
2013/12/18 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
六年级学生期末评语
2014/12/26 职场文书
食品质检员岗位职责
2015/04/08 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书