18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

随机抽奖小程序_iscroll完成下拉改写功用

2021-01-11分享 "> 对不起,没有下一图集了!">
iscroll实现下拉刷新功能     ——开心   这篇文章主要介绍了iscroll实现下拉刷新功能的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

版本号:iscroll4.2.5.js

iscroll 版本很有关系  在线: demo链接  有出现白屏的bug,将iscroll版本改成iscroll4.2.5就可以了

html

 !DOCTYPE html 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" 
 meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" 
 meta name="apple-mobile-web-app-capable" content="yes" 
 meta name="apple-mobile-web-app-status-bar-style" content="black" 
 title iScroll demo: simple /title 
 script type="text/javascript" src="../../src/iscroll.js" /script 
 script type="text/javascript" 
var myScroll,
 pullDownEl, pullDownOffset,
 pullUpEl, pullUpOffset,
 generatedCount = 0;
function pullDownAction () {
 setTimeout(function () { // -- work congestion, remove setTimeout from production!
 var el, li, i;
 el = document.getElementById('thelist');
 for (i=0; i i++) {
 li = document.createElement('li');
 li.innerText = 'Generated row ' + (++generatedCount);
 el.insertBefore(li, el.childNodes[0]);
 myScroll.refresh(); // Remember to refresh when contents are loaded (ie: pletion)
 }, 1000); // -- work congestion, remove setTimeout from production!
function pullUpAction () {
 setTimeout(function () { // -- work congestion, remove setTimeout from production!
 var el, li, i;
 el = document.getElementById('thelist');
 for (i=0; i i++) {
 li = document.createElement('li');
 li.innerText = 'Generated row ' + (++generatedCount);
 el.appendChild(li, el.childNodes[0]);
 myScroll.refresh(); // Remember to refresh when contents are loaded (ie: pletion)
 }, 1000); // -- work congestion, remove setTimeout from production!
function loaded() {
 pullDownEl = document.getElementById('pullDown');
 pullDownOffset = pullDownEl.offsetHeight;
 pullUpEl = document.getElementById('pullUp'); 
 pullUpOffset = pullUpEl.offsetHeight;
 myScroll = new iScroll('wrapper', {
 useTransition: true,
 topOffset: pullDownOffset,
 onRefresh: function () {
 if (pullDownEl.className.match('loading')) {
 pullDownEl.className = '';
 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
 } else if (pullUpEl.className.match('loading')) {
 pullUpEl.className = '';
 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
 onScrollMove: function () {
 if (this.y 5 !pullDownEl.className.match('flip')) {
 pullDownEl.className = 'flip';
 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
 this.minScrollY = 0;
 } else if (this.y 5 pullDownEl.className.match('flip')) {
 pullDownEl.className = '';
 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
 this.minScrollY = -pullDownOffset;
 } else if (this.y (this.maxScrollY - 5) !pullUpEl.className.match('flip')) {
 pullUpEl.className = 'flip';
 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
 this.maxScrollY = this.maxScrollY;
 } else if (this.y (this.maxScrollY + 5) pullUpEl.className.match('flip')) {
 pullUpEl.className = '';
 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
 this.maxScrollY = pullUpOffset;
 onScrollEnd: function () {
 if (pullDownEl.className.match('flip')) {
 pullDownEl.className = 'loading';
 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...'; 
 pullDownAction(); // Execute custom function (ajax call )
 } else if (pullUpEl.className.match('flip')) {
 pullUpEl.className = 'loading';
 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...'; 
 pullUpAction(); // Execute custom function (ajax call )
 setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
 /script 
 style type="text/css" media="all" 
body,ul,li {
 padding:0;
 margin:0;
 border:0;
body {
 font-size:12px;
 -webkit-user-select:none;
 -webkit-text-size-adjust:none;
 font-family:helvetica;
#header {
 position:absolute; z-index:2;
 top:0; left:0;
 width:100%;
 height:45px;
 line-height:45px;
 background-color:#d51875;
 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
 background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
 background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
 padding:0;
 color:#eee;
 font-size:20px;
 text-align:center;
#header a {
 color:#f3f3f3;
 text-decoration:none;
 font-weight:bold;
 text-shadow:0 -1px 0 rgba(0,0,0,0.5);
#footer {
 position:absolute; z-index:2;
 bottom:0; left:0;
 width:100%;
 height:48px;
 background-color:#222;
 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
 background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
 background-image:-o-linear-gradient(top, #999, #666 2%, #222);
 padding:0;
 border-top:1px solid #444;
#wrapper {
 position:absolute; z-index:1;
 top:45px; bottom:48px; left:-9999px;
 width:100%;
 background:#aaa;
 overflow:auto;
#scroller {
 position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 width:100%;
 padding:0;
#scroller ul {
 list-style:none;
 padding:0;
 margin:0;
 width:100%;
 text-align:left;
#scroller li {
 padding:0 10px;
 height:40px;
 line-height:40px;
 border-bottom:1px solid #ccc;
 border-top:1px solid #fff;
 background-color:#fafafa;
 font-size:14px;
#myFrame {
 position:absolute;
 top:0; left:0;

background:url(pull-) 0 0 no-repeat; -webkit-background-size:40px 80px; background-size:40px 80px; -webkit-transition-property:-webkit-transform; -webkit-transition-duration:250ms; #pullDown .pullDownIcon { -webkit-transform:rotate(0deg) translateZ(0); #pullUp .pullUpIcon { -webkit-transform:rotate(-180deg) translateZ(0); #pullDown.flip .pullDownIcon { -webkit-transform:rotate(-180deg) translateZ(0); #pullUp.flip .pullUpIcon { -webkit-transform:rotate(0deg) translateZ(0); #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon { background-position:0 100%; -webkit-transform:rotate(0deg) translateZ(0); -webkit-transition-duration:0ms; -webkit-animation-name:loading; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; @-webkit-keyframes loading { from { -webkit-transform:rotate(0deg) translateZ(0); } to { -webkit-transform:rotate(360deg) translateZ(0); } /style /head body div id="header" a href="iscroll" rel="external nofollow" iScroll /a /div div id="wrapper" div id="scroller" div id="pullDown" span /span span Pull down to refresh... /span /div ul id="thelist" li Pretty row 1 /li li Pretty row 2 /li li Pretty row 3 /li li Pretty row 4 /li li Pretty row 5 /li li Pretty row 6 /li li Pretty row 7 /li li Pretty row 8 /li li Pretty row 9 /li li Pretty row 10 /li li Pretty row 11 /li li Pretty row 12 /li li Pretty row 13 /li li Pretty row 14 /li li Pretty row 15 /li li Pretty row 16 /li li Pretty row 17 /li li Pretty row 18 /li li Pretty row 19 /li li Pretty row 20 /li li Pretty row 21 /li li Pretty row 22 /li li Pretty row 23 /li li Pretty row 24 /li li Pretty row 25 /li li Pretty row 26 /li li Pretty row 27 /li li Pretty row 28 /li li Pretty row 29 /li li Pretty row 30 /li li Pretty row 31 /li li Pretty row 32 /li li Pretty row 33 /li li Pretty row 34 /li li Pretty row 35 /li li Pretty row 36 /li li Pretty row 37 /li li Pretty row 38 /li li Pretty row 39 /li li Pretty row 40 /li /ul div id="pullUp" span /span span Pull up to refresh... /span /div /div /div div id="footer" /div /body /html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


"> 对不起,没有下一图集了!">
在线咨询