您的位置：首页 > 移动开发

4.0 appcan 下拉刷新上拉加载

2017-11-22 18:21 357 查看

条件：appcan ide:4.02

在这个版本之前的scrollbox.js是有问题的--（不采用）

上拉下拉事件：morn ，reload

干货：

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">

<head>
<title>
</title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
<link rel="stylesheet" href="./css/index.css">
</head>

<body class="" ontouchstart>
<div class="bc-bg" tabindex="0" data-control="PAGE" id="Page">
<div class="uh bc-head  ubb bc-border" data-control="HEADER" id="Header">
<div class="ub">
<div class="nav-btn" id="nav-left">
<div class="fa fa-lg ub-img1">
</div>
</div>
<h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">下拉刷新</h1>
<div class="nav-btn" id="nav-right">
<div class="fa fa-lg  ub-img1">
</div>
</div>
</div>
</div>
<div class="" data-control="CONTENT" id="ScrollContent">
<div class="scrollbo
4000
x">
<div class="box_bounce ub ub-ver ub-pc">
<div class="ub-f1">
</div>
<div class="bounce_status">下拉更新......</div>
<div class="bounce_status">
<div id="">
<!-- <img class="" style="width: 2.0em" src="img/loading.gif"/>  -->
松手更新.....
</div>
</div>
<div class="bounce_status">
<!-- <img style="width: 2.0em" src="img/loading.gif"/> -->
更新中.....
</div>
</div>

<div class="ub-fh">
<div id="listview"  class="ubt bc-border sc-bg"></div>
</div>
</div>

</div>
</div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/appcan.scrollbox.js"></script>
<!-- <script src="js/template.import.js"></script> -->
<script src="js/appcan.listview.js"></script>
<script type="text/javascript" charset="utf-8">
(function($) {
appcan.ready(function() {
$.scrollbox($("body")).on("releaseToReload",
function() { //After Release or call reload function,we reset the bounce
console.log("releaseToReload")
$("#ScrollContent").trigger("reload", this);
}).on("onReloading",
function() { //if onreloading status, drag will trigger this event
}).on("dragToReload",
function() { //drag over 30% of bounce height,will trigger this event
}).on("draging",
function(status) { //on draging, this event will be triggered.
}).on("release",
function() { //on draging, this event will be triggered.
}).on("scrollbottom",
function() { //on scroll bottom,this event will be triggered.you should get data from server
$("#ScrollContent").trigger("more", this);
}).reload();
})

$("#ScrollContent").on("reload",function(ev,scrollbox){
page = 25;//下拉更新--加载 -确保内容高度要比手机屏幕高（这里是一页多加几条，不够条数不能上啦，只能下拉刷新条数）
setTimeout(function(){
dataContent(page)
scrollbox.reset();
},100);
});
$("#ScrollContent").on("more",function(ev,scrollbox){
page = page+15;
setTimeout(function(){
dataContent(page)
scrollbox.reset();
},100);
});
})($);
var page = 25;
function dataContent(page){
var lv = appcan.listview({
selector : "#listview",
type : "thinLine"
});
var arrayData =[];
var dataL='';
for (var i=0; i <page; i++) {
var dataL = {
title : "a"+i,
}
arrayData.push(dataL)
};
lv.set(arrayData)
lv.on("click",function(ele,obj,curEle){
appcan.window.open({
name:'demo',
dataType:0,
aniId:10,
data:'index3.html'
});
})
}

</script>
</body>

</html>

效果图

----------------自己在你的IDE测试--js 引入--------------------

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 4.0 appcan 上拉刷新下拉加载 appcan 下拉上拉下拉代码

相关文章推荐

新的分享

章节导航