iscroll | 易学教程

iscroll 下拉刷新，上拉加载

阅读更多关于 iscroll 下拉刷新，上拉加载

新手，直接贴代码了 <!DOCTYPE html> <html class=""> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="stylesheet" href="css/amazeui.min.css" /> <link rel="stylesheet" href="css/acjl.css" /> <link rel="stylesheet" href="css/ydac_pm.css" /> <link href="css/mobiscroll.custom-2.15

H5基于iScroll实现下拉刷新，上拉加载更多

阅读更多关于 H5基于iScroll实现下拉刷新，上拉加载更多

使用技巧 1、引用iScroll.js，在初始化时添加两个事件监听：touchMove、DOMContentLoaded。 2、实现iScroll插件的onScrollEnd事件，也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。 3、上拉加载更多请求后台时就相当于分页请求数据，这时候需要在ajax请求时发送pageIndex参数，而初始化加载时需要从后台返回一个pageCount以便前台判断。 4、最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法。效果图实现方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 var myScroll,

H5基于iScroll实现下拉刷新，上拉加载更多

阅读更多关于 H5基于iScroll实现下拉刷新，上拉加载更多

前言前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果，脑海里第一反映就是微博那种效果，刚开始的理解有些偏差，以为下拉也是追加数据，上拉也是追加数据，后请教同事后发现其实下拉只是刷新最新数据而已，上拉是追加数据。使用技巧： 1、引用iScroll.js，在初始化时添加两个事件监听：touchMove、DOMContentLoaded。 2、实现iScroll插件的onScrollEnd事件，也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。 3、上拉加载更多请求后台时就相当于分页请求数据，这时候需要在ajax请求时发送pageIndex参数，而初始化加载时需要从后台返回一个pageCount以便前台判断。 4、最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法。效果图实现方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

202 移动端常用开发插件：fastclick ，Swiper ，lsuperslide，iscroll，zy.media.js

阅读更多关于 202 移动端常用开发插件：fastclick ，Swiper ，lsuperslide，iscroll，zy.media.js

1.5.1 什么是插件移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？ JS 插件：是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。我们以前写的animate.js 也算一个最简单的插件 fastclick 插件解决 300ms 延迟。 GitHub官网地址： https:// github.com/ftlabs/fastclick 1.5.2 插件的使用引入 js 插件文件。按照规定语法使用。 fastclick 插件解决 300ms 延迟。 GitHub官网地址： https://github.com/ftlabs/fastclick if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } 1.5.3 Swiper 插件的使用中文官网地址： https://www.swiper.com.cn/ 引入插件相关文件。按照规定语法使用 1.5.4 其他移动端常见插件：lsuperslide

IScroll自动计算高度代码

阅读更多关于 IScroll自动计算高度代码

setScrollHeight: function () { var temp_height = 0; temp_height = $("#" + this.wrapperId).height(); try { var showHeight = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - this.headAndBottomHeight; if (temp_height !== showHeight) temp_height = showHeight; } catch (e) { ; }; $("#" + this.wrapperId).height(temp_height); if (!this.isNoData)//有数据 { $("#" + this.scrollId).css("min-height", temp_height + 1); $("#" + this.scrollId).height(""); } else {//无数据 $("#" + this.scrollId).css("min-height", 0); $("#" + this.scrollId).height(""); } if (this.myScroll

How to create infinite iscroll?

阅读更多关于 How to create infinite iscroll?

问题 I created iScroll on my webpage and it was working very well. But now i want to make it work as infinite iscroll, but i don't know how to do that. my iscroll code is: myCarousel_up = new iScroll('scroller_upCarousel', { snap: true, momentum: false, hScrollbar: false, vScrollbar: false, desktopCompatibility:true, onScrollEnd: function () { } }); Can anyone help me? 回答1: First you need to add iscroll-infinite.js then you need to write ajax function to load or append data in infinite loop.

如何停止CSS3的动画？

阅读更多关于如何停止CSS3的动画？

前言相信对移动端有了解的朋友对iScroll这个库非常熟悉吧，今天我们就来说下我们移动页面的iScroll化 iScroll是我们必学框架之一，我们这次先根据iScroll功能自己实现其功能，然后再学习iScroll源码下面先给出iScroll官方的例子和源码，要看效果的朋友自己去看吧： https://github.com/cubiq/iscroll 本人能力有限，文中有误请提出 viewport 在移动端新出了一个属性叫做“viewport”，这个便是我们手机上的虚拟视口（viewport），也就是视觉窗口，显示区域移动设备的显示区域比电脑小得多（但也方便得多），为了让手机显示的更加友好，Apple提供了一个方法：在浏览器定义了viewport meta标签他的作用就是创建一个虚拟窗口，这个虚拟窗口接近桌面浏览器（980px），事实上viewport就是用以放大缩小网页内容 <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度

When I am using ajax to render the Scroller part iScroll doesn't work

阅读更多关于 When I am using ajax to render the Scroller part iScroll doesn't work

问题 I met a strange problem. If I use "for loop" to render html into scroller part,everything works well. But when I am using ajax to render my data into scroller part.iScroll doesn't work(can't scroll). This is my url : http://yuanwang.sinaapp.com/8505/item.html You can copy my code and try yourself. Open the item.js and try to run "for loop",you can see everything runs well. 回答1: Have you tried setting up your iScroll inside the success function of your .ajax() call? It looks like you're trying

When I am using ajax to render the Scroller part iScroll doesn't work

阅读更多关于 When I am using ajax to render the Scroller part iScroll doesn't work

how to use iscroll javascript in phone gap?

阅读更多关于 how to use iscroll javascript in phone gap?

问题 I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0 I have copied the javascript of iscroll-lite from here html code <div id="wrapper" class="wrapper"> <div id="wrapper-container" class="wrapper-container"> <div id="header" class="header"> <div id="header_title" class="header_title"> </div> <div id="abc" class="abc"><img src="img/abc.png""/> </div> </div> <div

订阅 iscroll