下拉刷新在真机不work，在边做边看模式work

分类：MUI

以下是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="../css/mui.css">  
<title>漂圈</title>  
<link href="../css/mui.css" rel="stylesheet"/>  
<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>  
<style>  
    html,  
    body {  
        background-color: #efeff4;  
        font-size: 15px;;  
    }  
    /*重写标题栏颜色*/  
    .mui-bar-nav{  
        background-color: #4D4D4D;  
    }  

    /*重写返回箭头a标签颜色*/  
    .mui-bar > a {  
        color:#FFFFFF;  
    }  

    /*重写标题字体*/  
    .mui-title{  
        font-family: "微软雅黑";  
        color:#FFFFFF;  
    }  
    .username{  
        color:#0062CC;  
        font-size:16px  
    }  
    /*清空a标签样式*/  
    .label-clear-a{  
        text-decoration:none;  
        color:#000000  
    }  
    .cui-bubble-layer {   
        margin-top:7px;  
        position: relative;  
        list-style: none;  
        background: #F2F2F2;   
        padding:6px;  
        /*border-radius: 3px;*/  
    }  
    .cui-bubble-layer:before {   
        position: absolute;   
        content: "";   
        width: 10px;   
        height: 10px;   
        -webkit-transform: rotate(45deg);   
        background: #F2F2F2;   
        top: -6px;   
        left: 5%;   
        z-index: 1;  
    }  
</style>

</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-icon mui-icon-camera mui-pull-right"></a>
<h1 class="mui-title">漂圈</h1>
</header>

<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="posts" class="mui-table-view" style="margin:0">
<li class="mui-table-view-cell mui-media">
<img data-id="userId" class="mui-media-object mui-pull-left" src="../images/tmp/photo.jpg">
<span id="name" data-id="userId" class="username">Eason</span>
<div class="mui-media-body">
<span style="display: block;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span>
<p class="mui-pull-left">7分钟前</p>
<span class="mui-icon iconfont icon-appgengduo mui-pull-right"></span>
<div class="mui-clearfix"></div>
<ul class="cui-bubble-layer">
<li style="border-bottom:1px solid #EBEBEB">
<span class="mui-icon iconfont icon-xin username"></span>
<span id="name" data-id="userId" class="username">briant</span>
<span class="username">,</span>
<span id="name" data-id="userId" class="username">erich</span>
</li>
<li>
<a class="label-clear-a">
<span id="name" data-id="userId" class="username">Carson</span>
：<span>你牛逼</span>
</a>
</li>
<li>
<a class="label-clear-a">
<span id="name" data-id="userId" class="username">Aaron</span>
：<span>说的就是</span>
</a>
</li>
<li>
<a class="label-clear-a">
<span id="name" data-id="userId" class="username">Larry</span>
：<span>赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.indexedlist.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/plugins/ajax.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/config.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/HmacSHA256Utils.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init({
swipeBack:true, //启用右滑关闭功能
pullRefresh:{
container:'#pullrefresh',
down:{
callback:pulldownRefresh
},
up:{
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});

        // 记录全局查询条件(翻页时,需要保持其他参数不变)  
        var params = {};  

        // 返回的当前page对象,记录分页相关数据  
        var page = {};  

        // 设置锁的初始状态为关闭  
        var lock = false;  

        var list = document.querySelector(".mui-table-view")  

        // 主列表点击事件  
        mui('#posts').on('tap', 'a', function() {  
            // 判断锁的状态  
            if(lock){  
                return;  
            }  
            // 打开锁  
            lock = true;  
            // 关闭锁  
            setTimeout(function(){  
            },1000)  
                lock = false;  

            // 打开等待框  
            plus.nativeUI.showWaiting("正在加载...");  
            // 获取需要拉取数据的id  
            var objId = this.getAttribute('data-id');  
            // 获取到详情页面  
            var page = plus.webview.getWebviewById('drifter-circle.html');  
            // 通知详情页面去ajax拉取数据(在渲染页面和移动窗体之前)  
            mui.fire(page,'pulldata',{objId:objId});  
        });  

        // 监听拉取数据事件,如何判读那  
        document.addEventListener('pulldata',function (event) {  
            // event.detail即fire函数传递的params  
            var params = {};

// app.encrypt(params);
mui.web_query('/api/post/list',params,onSuccess,null,{retry:3,traditional:true});
});

        // tab页面简单查询,ajax请求的成功回调,渲染数据,打开页面  
        var onSuccess = function (data) {  
            // 记录返回的page对象  
            page = data.obj;  
            var datalist = data.obj.content;  
            var table = document.body.querySelector('.mui-table-view');  
            for(var i = 0; i<datalist.length; i++){  
                var li = document.createElement('li');  
                li.className = 'mui-table-view-cell mui-media';  
                li.innerHTML = '<a data-id=userId'  
                    +'<li class="mui-table-view-cell mui-media">'  
                    +'<img data-id="userId" class="mui-media-object mui-pull-left" src="../images/tmp/photo.jpg">'  
                    +'<span id="name" data-id="userId" class="username">'+datalist[i].owner+'</span>'  
                    +'<div class="mui-media-body">'  
                    +'<span style="display: block;">'+datalist[i].content+'</span>'  
                    +'<p class="mui-pull-left">7分钟前</p>'  
                    +'<span class="mui-icon iconfont icon-appgengduo mui-pull-right"></span>'  
                    +'</div></li>';  
                list.appendChild(li);  
            }  
            // 延迟50ms,保证dom渲染完毕后再关闭等待框,以pop-in方式show出当前窗口  
            setTimeout(function(){  
                plus.nativeUI.closeWaiting();  
                var page = plus.webview.getWebviewById('circle.html');  
                page.show('pop-in');  
            },50)  
        };  

        /**  
         * 下拉刷新  
         * 逻辑：  
         * 1、清空列表  
         * 2、设置页码数为0(服务端页码数从0开始)  
         * 3、ajax拉取数据并渲染  
         */  
        function pulldownRefresh() {  
            setTimeout(function() {  
                // 清空list的子元素  
                common.removeAll(list);  
                // 查询条件不变,页码数设置成第0页  
                params.pageNo = 0;  
                params.sequence = '123456789';  
                // 渲染数据  
                mui.web_query('/api/post/list',params,onPagingSuccess,null,{retry:3});  
                // 刷新完毕  
                console.log(params.data);  
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();   
                //从新启用上拉刷新  
                //mui('#pullrefresh').pullRefresh().enablePullupToRefresh();  
                mui('#pullrefresh').pullRefresh().refresh(true);  

            }, 1000);  
        }  

        /**  
         * 上拉加载  
         * 逻辑：  
         * 1、当前页数大于最后一页,则不能继续上拉  
         * 2、设置页码数为当前页码数+1  
         * 3、ajax拉取数据并渲染  
         */  
        /**  
         * 上拉加载  
         * 逻辑：  
         * 1、当前页数大于最后一页,则不能继续上拉  
         * 2、设置页码数为当前页码数+2(服务端页码数从0开始)  
         * 3、ajax拉取数据并渲染  
         */  
        function pullupRefresh() {  
            setTimeout(function() {  
                // 若当前页码数+1大于总页数,则停止上拉加载  
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((page.number + 1 > page.totalPages));  
                // 后端返回的page对象的页码数需要加1,翻页再加1,其余参数不变  
                params.pageNo = page.number + 2;  
                console.log(params.pageNo);  
                mui.web_query('/api/post/list',params,onPagingSuccess,null,{retry:3});  
            }, 1000);  
        }  

        // 上拉加载后,渲染数据  
        var onPagingSuccess = function (data) {  
            // 记录返回的page对象  
            page = data.obj;  
            var datalist = data.obj.content;  
            var table = document.body.querySelector('.mui-table-view');  
            for(var i = 0; i<datalist.length; i++){  
                var li = document.createElement('li');  
                li.className = 'mui-table-view-cell mui-media';  
                li.innerHTML = '<a data-id=userId'  
                    +'<li class="mui-table-view-cell mui-media">'  
                    +'<img data-id="userId" class="mui-media-object mui-pull-left" src="../images/tmp/photo.jpg">'  
                    +'<span id="name" data-id="userId" class="username">'+datalist[i].owner+'</span>'  
                    +'<div class="mui-media-body">'  
                    +'<span style="display: block;">'+datalist[i].content+'</span>'  
                    +'<p class="mui-pull-left">7分钟前</p>'  
                    +'<span class="mui-icon iconfont icon-appgengduo mui-pull-right"></span>'  
                    +'</div></li>';  
                list.appendChild(li);  
                }  
        };  
</script>

</html>

2016-03-10 15:11 负责人:无分享

1 个回复

DCloud_UNI_FXY

必须使用双webview
http://dev.dcloud.net.cn/mui/pulldown/

2016-03-10 18:43 分享

该问题目前已经被锁定, 无法添加新回复

下拉刷新在真机不work，在边做边看模式work

1 个回复

公告

相关问题

下拉刷新在真机不work，在边做边看模式work

与内容相关的链接

1 个回复

公告

相关问题