拖动选项卡增加上下拉刷新功能,无法上拉刷新

分类：MUI

mui

JS代码：

mui.init({  
                swipeBack: false,  
                pullRefresh: {  
                    container: '#tuijianbox',  
                    down: {  
                        callback: pulldownRefresh  
                    },  
                    up: {  
                        contentrefresh: '正在加载...',  
                        callback: pullupRefresh  
                    }  
                }  
            });  

            /**  
             * 下拉刷新具体业务实现  
             */  
            function pulldownRefresh() {  
                setTimeout(function() {  
                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    for (var i = cells.length, len = i + 3; i < len; i++) {  
                        var li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  
                        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
                        //下拉刷新，新纪录插到最前面；  
                        table.insertBefore(li, table.firstChild);  
                    }  
                    mui('#tuijianbox').pullRefresh().endPulldownToRefresh(); //refresh completed  
                }, 1500);  
            }  
            var count = 0;  
            /**  
             * 上拉加载具体业务实现  
             */  
            function pullupRefresh() {  
                setTimeout(function() {  
                    mui('#tuijianbox').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    for (var i = cells.length, len = i + 20; i < len; i++) {  
                        var li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  
                        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
                        table.appendChild(li);  
                    }  
                }, 1500);  
            }  

            (function($) {  
                $('.mui-scroll-wrapper').scroll({  
                    indicators: true //是否显示滚动条  
                });  
                var box=document.querySelectorAll(".mui-control-content");  
                    box[0].style.height=(document.body.scrollHeight-46)+'px';  
                var cont='';  
                for(var a=0;a<20;a++){  
                    cont+='<li class="mui-table-view-cell">第'+a+'个元素!</li>';  
                }  
                box[0].querySelector(".mui-scroll").innerHTML='<ul class="mui-table-view">'+cont+'</ul>';  
                document.getElementById('slider').addEventListener('slide', function(e) {  
                    i=e.detail.slideNumber;  
                    if(i>0){  
                    box[i].style.height=(document.body.scrollHeight-46)+'px';  
                    box[i].querySelector(".mui-scroll").innerHTML='<ul class="mui-table-view">'+cont+'</ul>';  
                    }  

                });  

            })(mui);

html代码：

<div class="mui-content">  
            <div id="slider" class="mui-slider">  
                <div class="mui-slider-group">  
                    <div class="mui-slider-item mui-control-content">  
                        <div class="mui-scroll-wrapper" id="tuijianbox">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="mui-slider-item mui-control-content">  
                        <div class="mui-scroll-wrapper" id="gaofenbox">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  
                    <div class="mui-slider-item mui-control-content">  
                        <div class="mui-scroll-wrapper" id="shehuibox">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="mui-slider-item mui-control-content">  
                        <div class="mui-scroll-wrapper" id="kejibox">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="mui-slider-item mui-control-content">  
                        <div class="mui-scroll-wrapper" id="yulebox">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="mui-slider-item mui-control-content">  
                        <div class="mui-scroll-wrapper" id="gaoxiaobox">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="mui-slider-item mui-control-content">  
                        <div class="mui-scroll-wrapper" id="caijingbox">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="mui-slider-item mui-control-content">  
                        <div class="mui-scroll-wrapper" id="tiyubox">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="mui-slider-item mui-control-content">  
                        <div class="mui-scroll-wrapper" id="junshibox">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="mui-slider-item mui-control-content">  
                        <div class="mui-scroll-wrapper" id="guojibox">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>

2015-01-25 19:44 负责人:无分享

3 个回复

DCloud_UNI_FXY

该代码目前仅限ios使用

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <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.min.css">  
        <script src="../js/mui.min.js"></script>  
        <script src="../js/app.js"></script>  
        <style>  
            html,  
            body {  
                background-color: #efeff4;  
            }  
        </style>  
    </head>  

    <body>  
        <div class="mui-content">  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <a class="mui-control-item mui-active" href="#item1mobile">  
                        待办公文  
                    </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                        已办公文  
                    </a>  
                    <a class="mui-control-item" href="#item3mobile">  
                        全部公文  
                    </a>  
                </div>  
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="scroll1" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <ul class="mui-table-view">  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-6  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-7  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-8  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-9  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-10  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-11  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-12  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-13  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-14  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-15  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-16  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-17  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-18  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-19  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-20  
                                    </li>  
                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll2" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <ul class="mui-table-view">  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-6  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-7  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-8  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-9  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-10  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-11  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-12  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-13  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-14  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-15  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-16  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-17  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-18  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-19  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-20  
                                    </li>  
                                </ul>  
                            </div>  
                        </div>  

                    </div>  
                    <div id="item3mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll3" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <ul class="mui-table-view">  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-6  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-7  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-8  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-9  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-10  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-11  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-12  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-13  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-14  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-15  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-16  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-17  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-18  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-19  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-20  
                                    </li>  
                                </ul>  
                            </div>  
                        </div>  

                    </div>  
                </div>  

            </div>  
        </div>  

        <script>  
            mui.init({  
                swipeBack: false  
            });  
            mui('#scroll1').pullRefresh({  
                down: {  
                    callback: pulldownRefresh  
                },  
                up: {  
                    contentrefresh: '正在加载...',  
                    callback: pullupRefresh  
                }  
            });  
            mui('#scroll2').pullRefresh({  
                down: {  
                    callback: pulldownRefresh  
                },  
                up: {  
                    contentrefresh: '正在加载...',  
                    callback: pullupRefresh  
                }  
            });  
            mui('#scroll3').pullRefresh({  
                down: {  
                    callback: pulldownRefresh  
                },  
                up: {  
                    contentrefresh: '正在加载...',  
                    callback: pullupRefresh  
                }  
            });  
            /**  
             * 下拉刷新具体业务实现  
             */  
            function pulldownRefresh() {  
                var self = this;  
                setTimeout(function() {  
                    self.endPulldownToRefresh(); //refresh completed  
                }, 1500);  
            }  
            var count = 0;  
            /**  
             * 上拉加载具体业务实现  
             */  
            function pullupRefresh() {  
                var self = this;  
                setTimeout(function() {  
                    self.endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
                }, 1500);  
            }  
        </script>  

    </body>  

</html>

jukai

请问下，安卓下以上代码没办法支持吗，如果不能支持后续会支持吗？

2015-01-29 01:08
DCloud_UNI_FXY

目前android上的下拉刷新是原生实现的，跟可拖拽选项卡整合使用的话，那么下拉刷新的位置只能位于整个选项卡的上边。

2015-01-29 17:32
jukai

回复 DCloud_UNI_FXY:请问下“下拉刷新的位置只能位于整个选项卡的上边”这个怎么实现可以说的再详细些吗，比如有没有实现代码

2015-02-02 00:46
DCloud_UNI_FXY

把选项卡放到下拉刷新里边，自己识别是哪个选项卡选中的来处理不同数据的加载。

2015-02-02 18:05
和尚丶

回复 DCloud_UNI_FXY:添加刷新后，选项卡内容超过一屏后，无法滚动呢

2015-03-25 15:00
ilfeng

您好请问现在对这个问题有统一的解决方案吗，毕竟这是一个常见到的问题啊

2015-04-10 16:29
Kody

回复 DCloud_UNI_FXY: 请问现在最新版已经完美支持拖动选项卡增加上下拉刷新功能吗？

2015-06-14 22:45
DCloud_UNI_FXY

参考hello-mui中的pullrefresh_with_tab.html

2015-06-14 23:36