// 实例一 三种事件监听机制 _________________________________________________________________________ var myScroll = new IScroll('.box', { // 关闭指针事件监听 // 一般在PC 移动以外的平台时开启 disablePointer : true, // 如果知道是在移动端 可以关闭鼠标事件监听 提高iScroll运行速度 disableMouse : true, // 如果是在PC端 可以关闭触摸事件监听 提高iScroll运行速度 disableTouch : true }); // 实例二 eventPassthrough _________________________________________________________________________ // eventPassthrough : 表示是否保留原生的横向或纵向滚动条 var myScroll = new IScroll('.box', { // 屏蔽iScroll横向滚动效果 保留横向原生滚动条 // 保留纵向iScroll滚动效果 eventPassthrough : 'horizontal', // 横向滚动 scrollX : true, // 纵向滚动 scrollY : true }); // 实例三 freeScroll _________________________________________________________________________ var myScroll = new IScroll('.box', { // 屏蔽iScroll横向滚动效果 保留横向原生滚动条 // 保留纵向iScroll滚动效果 eventPassthrough : false, // 横向滚动 scrollX : true, // 纵向滚动 scrollY : true, // true : x y 方向可以同时滚动 // 如果eventPassthrough 设置成true|horizontal 相对应的方向失效 freeScroll : true }); // 实例四 shrinkScrollbars 滚动条收缩效果 _________________________________________________________________________ var myScroll = new IScroll('.box', { // 开启滚动条 scrollbars : true, // 禁止滚动条淡入淡出 节省资源 fadeScrollbars : false, // 滚动条是否可拖动 interactiveScrollbars : true, // 滚动到容器外时滚动条的样式 // scale : 兼容各种设备 兼容性好 效果好 适合高档机器 // clip : 只是把滚动条隐藏 兼容性一般 效果一般 适合低档机器 // false : 默认值 滚动条没有收缩效果 shrinkScrollbars : 'scale' }); // 实例五 custom 设置滚动条样式 _________________________________________________________________________ var myScroll = new IScroll('.box', { // 开启横向滚动条 scrollX : true, // 开启滚动条 scrollbars : 'custom', // 定义竖向滚动条高度 横向滚动条宽度 // true : 滚动条根据容器自动计算滚动条的高度或宽度 // false : 不会自动计算高度或宽度 需要用户设置 resizeScrollbars : true, // 开启收缩弹性设置 shrinkScrollbars : 'clip' }); // 实例六 指示器 _________________________________________________________________________ var myScroll = new IScroll('.img', { // 必须给startY一个20以上的负值 否则一开始会卡 // 这是一个BUG startY : -20, // 开启横向滚动条 scrollX : true, // X Y方向随意滚动 freeScroll : true, // 设置指示器参数 indicators: { // 强制性参数 指向滚动条容器元素的引用 el: '.s', // 指示器横轴被监听 如果设置成false 横轴不会被监听 listenX : true, // 指示器纵轴被监听 如果设置成false 纵轴不会被监听 listenY : true, // 滑到空白区域时是否开启弹性 shrink : 'clip', // 是否开启滚动条可拖动 interactive: true, // 是否根据容器自动设置滚动条的宽高 resize : true } }); // 实例七 scrollTo _________________________________________________________________________ var myScroll = new IScroll('.box', { // 初始位置 startY : -120, scrollX : true, // 如果硬件性能较差 屏蔽把滚动条添加到硬件上 HWCompositing : false, // 非PC端 关闭鼠标监听 加快运算速度 disableMouse : true, // 关闭指针监听 disablePointer : true, // 关闭反弹效果 提高运算速度 bounce : false }); $('body').on('click', function (){ // scrollTo(x, y, time, 动画) : 移动到哪个位置(每次都是相对于初始位置) // 常用动画包括这几个效果quadratic circular back bounce // myScroll.scrollTo(0, -200, 2000, IScroll.utils.ease.bounce); // scrollBy(x, y, time, 动画) : 移动到哪个位置(每次都是相对于当前位置) // myScroll.scrollBy(0, -200, 2000, IScroll.utils.ease.bounce); // scrollToElement(el, time, offsetX, offsetY, 动画) : 移动到某个节点 // offsetX offsetY 如果设置成true 元素将会位于屏幕的中间 myScroll.scrollToElement('.c', 2000, -20, -20, IScroll.utils.ease.bounce); }); // 实例八 gotoPage next prev _________________________________________________________________________ var myScroll = new IScroll('.box', { scrollbars : true, // snap : 表示有什么分页 // 如果没有使用gotoPage 每次滑动会自动找下一个分页点 snap : '.c' }); $('body').on('click', function (){ // 首先用.c 在html上做了几个分页点 // 滚动到下一页 // myScroll.next(); // 滚动到上一页 // myScroll.prev(); // x : x轴滚动到第几页 // y : y轴滚动到第几页 goToPage(x, y, time, 动画); }); // 实例八 无限下拉加载 _________________________________________________________________________ var loadFile = function (){ var y = 0; var ulHeight = 0; var myScroll = new IScroll('.box', { scrollbars : true, snap : '.c' }); // 用户触摸屏幕时获取当前文档高度 myScroll.on('beforeScrollStart', function (){ ulHeight = $('ul').height(); }); // 滚动完成触发 myScroll.on('scrollEnd', function (){ // myScroll.y : 当前滚动的位置 var height = Math.abs(myScroll.y); // 如果当前滚动位置大于页面高度才加载新动容 if(height+250 > ulHeight){ $.ajax({ url : '1.php', type : 'POST', success : function (data){ $('ul').append(data); // 插入新内容后重新刷新页面 myScroll.refresh(); } }); } }); }; loadFile();