今天跟大家讲的是在Appframework3.0下实现iscroll，可能这里很多人觉得没有什么好讲的，因为这个插件在网上被大家琢磨的太多了，当然那些相同的就不做详细说明了，主要说下不同的地方。
在这里简单介绍下我自己理解的Appframework3.0，其实说白了，它只有一个页面，就是index.html，然后很多pannel，基本上不会有页面刷新这个动作，一般是刷新某个pannel的数据，我这里讲的就是如何在非主页下面实现iscrool。
关于页面间切换触发的函数在上一讲已经说过了，点击进入。
iscroll5官网
让大家看下效果图：
我这里贴主要代码说明：
css样式
#wrapper {
position: absolute;
z-index: 1;
top: 0px;
bottom: 0px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller li {
padding: 0 10px;
height: 60px;
line-height: 23px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
#scroller li a{ text-decoration: none; color: black}
#scroller li p{}
#scroller li p b{ font-weight: normal;color: #d8d8d8}
#scroller li p b.pdright1{padding-right: 15px;}
#scroller li p b.right{ float: right}
#scroller li p b.t{ color: #d8d8d8}
#pullDown,#pullUp,.pulldown-tips{
height:40px;
line-height:40px;
text-align:center;
}
.pulldown-tips{
position:absolute;
top:-40px;
left:0;
width:100%;
}css样式基本没什么要讲的了。
js代码
/****下拉代码开始***/
function setScrollHeight() {
var height=$(".ScrollList").height();
var lastHeight=height-270+'px';
$(".ArtList").css("height",lastHeight);
}
function load () {
var myScroll,
pullDown = $("#pullDown"),
pullUp = $("#pullUp"),
pullDownLabel = $(".pullDownLabel"),
pullUpLabel = $(".pullUpLabel"),
container = $('#list'),
loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
pullDown.hide();
pullUp.hide();
myScroll = new IScroll("#wrapper", {
scrollbars: true,
mouseWheel: false,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
scrollY:true,
probeType: 2,
bindToWrapper:true
});
myScroll.on("scroll",function(){
if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){
if(this.y > 60){//下拉刷新操作
$(".pulldown-tips").hide();
pullDown.addClass("refresh").show();
pullDownLabel.text("松手刷新数据");
loadingStep = 1;
myScroll.refresh();
}else if(this.y < (this.maxScrollY - 14)){//上拉加载更多
pullUp.addClass("refresh").show();
pullUpLabel.text("正在载入");
loadingStep = 1;
pullUpAction();
}
}
});
myScroll.on("scrollEnd",function(){
if(loadingStep == 1){
if( pullDown.attr("class").match("refresh") ){//下拉刷新操作
pullDown.removeClass("refresh").addClass("loading");
pullDownLabel.text("正在刷新");
loadingStep = 2;
pullDownAction();
}
}
});
function pullDownAction(){
setTimeout(function(){
var li, i;
for (i = 0,li = ""; i < 3; i++) {
var date = new Date();
li +="<li><a href=\"#\">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a><p><b class=\"t\">考生寄语</b><b class=\"right\">"+date.pattern("yyyy-MM-dd")+"</b><b class=\"right pdright1\">莫菲"+i+"</b></p></li>"
}
container.prepend(li);
pullDown.attr('class','').hide();
myScroll.refresh();
loadingStep = 0;
$(".pulldown-tips").show();
},1000);
}
function pullUpAction(){
setTimeout(function(){
var li, i;
for (i = 0,li = ""; i < 3; i++) {
var date = new Date();
li +="<li ><a href=\"#\">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a><p><b class=\"t\">考生寄语</b><b class=\"right\">"+date.pattern("yyyy-MM-dd")+"</b><b class=\"right pdright1\">莫菲"+i+"</b></p></li>"
}
container.append(li);
pullUp.attr('class','').hide();
myScroll.refresh();
loadingStep = 0;
},1000);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
}
/****下拉代码结束***/这里有两个函数setScrollHeight，load ，setScrollHeight是为了设置全屏，一般来说很少会有全屏的下拉上拉刷新数据，除非是资讯类的app，这里我就是先获取页面的高度计算出剩下高度；load就是下拉上拉刷新数据的方法咯(这里是从其他地方复制粘贴出来了，就不多说)。
最后贴我觉得比较重要的代码，这里我也研究了很久才研究出来的。
html代码
<div class="panel ScrollList" data-title="最新动态" id="notice" data-load="Zuixindongtailoaded">
....
<div id="wrapper">
<div id="scroller">
<div id="pullDown" class=""><div class="pullDownLabel"></div></div>
<div class="pulldown-tips">下拉刷新</div>
<ul id="list">
<li><a href="#">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a>
<p><b class="t">考生寄语</b><b class="right">2017-04-19</b><b class="right pdright1">莫菲</b></p></li>
<li><a href="#">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a>
<p><b class="t">考生寄语</b><b class="right">2017-04-19</b><b class="right pdright1">莫菲</b></p></li>
<li><a href="#">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a>
<p><b class="t">考生寄语</b><b class="right">2017-04-19</b><b class="right pdright1">莫菲</b></p></li>
<li><a href="#">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a>
<p><b class="t">考生寄语</b><b class="right">2017-04-19</b><b class="right pdright1">莫菲</b></p></li>
<li><a href="#">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a>
<p><b class="t">考生寄语</b><b class="right">2017-04-19</b><b class="right pdright1">莫菲</b></p></li>
<li><a href="#">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a>
<p><b class="t">考生寄语</b><b class="right">2017-04-19</b><b class="right pdright1">莫菲</b></p></li>
<li><a href="#">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a>
<p><b>考生寄语</b><b class="right">2017-04-19</b><b class="right pdright1">莫菲</b></p></li>
<li><a href="#">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a>
<p><b class="t">考生寄语</b><b class="right">2017-04-19</b><b class="right pdright1">莫菲</b></p></li>
<li><a href="#">一分耕耘，一分收获，未必;九分耕耘，会有收获，一定!</a>
<p><b class="t">考生寄语</b><b class="right">2017-04-19</b><b class="right pdright1">莫菲</b></p></li>
</ul>
<div id="pullUp" class="">
<div class="pullUpLabel">加载更多</div>
</div>
</div>
</div>
....
</div>js代码
<script language="JavaScript" type="text/javascript">
function Zuixindongtailoaded() {
setScrollHeight(); //设置高度
load ();//加载上拉下拉刷新数据方法
}
</script>我这里主要讲的就是data-load=”Zuixindongtailoaded” 这个就是该panel加载的时候执行的方法，一般iscroll讲的都是写在 ，我这里测试写在body里面上拉下拉刷新数据效果一直不出来，大家可以尝试尝试，也可能有其他的方法。
作者：mofijeck 发表于2017/4/19 20:51:54 原文链接
阅读：59 评论：0 查看评论