4.0 appcan 下拉刷新上拉加载

来源：互联网发布：linux 视频剪辑编辑：程序博客网时间：2024/06/06 08:25
条件：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="scrollbox">                    <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 引入--------------------
1 0