滑动选项卡问题

分类：MUI

滑动选项卡pulltorefresh，目前出现的问题是标题动态获取后无法正常显示和滑动，必须存在静态的html与动态生成html的标题数和字数相同方能正常显示和滑动，但是动态生成的内容，下拉刷新失效。

2015-09-01 16:46 负责人:无分享

1 个回复

DCloud_UNI_FXY

贴代码

极飞 (作者)

<!DOCTYPE html>

<html>

<head>  

    <meta charset="utf-8">  

    <title>推荐</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">  

    <style>  

        html,  

        body {  

            background-color: #efeff4;  

        }  

        .mui-bar~.mui-content .mui-fullscreen {  

            top: 44px;  

            height: auto;  

        }  

        .mui-pull-top-tips {  

            position: absolute;  

            top: -20px;  

            left: 50%;  

            margin-left: -25px;  

            width: 40px;  

            height: 40px;  

            border-radius: 100%;  

        }  

        .mui-bar~.mui-pull-top-tips {  

            top: 24px;  

        }  

        .mui-pull-top-wrapper {  

            width: 42px;  

            height: 42px;  

            display: block;  

            text-align: center;  

            background-color: #efeff4;  

            border: 1px solid #ddd;  

            border-radius: 25px;  

            background-clip: padding-box;  

            box-shadow: 0 4px 10px #bbb;  

            overflow: hidden;  

        }  

        .mui-pull-top-tips.mui-transitioning {  

            -webkit-transition-duration: 200ms;  

            transition-duration: 200ms;  

        }  

        .mui-pull-top-tips .mui-pull-loading {  

            /*-webkit-backface-visibility: hidden;  

            -webkit-transition-duration: 400ms;  

            transition-duration: 400ms;*/  



            margin: 0;  

        }  

        .mui-pull-top-wrapper .mui-icon,  

        .mui-pull-top-wrapper .mui-spinner {  

            margin-top: 7px;  

        }  

        .mui-pull-top-wrapper .mui-icon.mui-reverse {  

            /*-webkit-transform: rotate(180deg) translateZ(0);*/  

        }  

        .mui-pull-bottom-tips {  

            text-align: center;  

            background-color: #efeff4;  

            font-size: 15px;  

            line-height: 40px;  

            color: #777;  

        }  

        .mui-pull-top-canvas {  

            overflow: hidden;  

            background-color: #fafafa;  

            border-radius: 40px;  

            box-shadow: 0 4px 10px #bbb;  

            width: 40px;  

            height: 40px;  

            margin: 0 auto;  

        }  

        .mui-pull-top-canvas canvas {  

            width: 40px;  

        }  

        .mui-slider-indicator.mui-segmented-control {  

            background-color: #efeff4;  

        }  

        /*点击变蓝色高亮*/  

        .mui-table-view-cell.mui-active{  

            background-color: #0062CC;  

        }  

        .mui-media-object.mui-pull-left{  

            max-width:85px;  

            height:60px;  

        }  

    </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>  

        <h1 class="mui-title">推荐</h1>  

    </header>  

    <div class="mui-content">  

        <div id="slider" class="mui-slider mui-fullscreen">  

            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  

                <div id="info_class" class="mui-scroll">  

                    <a class="mui-control-item mui-active" href="#info1">  

                        推荐推荐  

                    </a>  

                    <a class="mui-control-item" href="#info2">  

                        热点推荐  

                    </a>  

                    <a class="mui-control-item" href="#info3">  

                        北京推荐  

                    </a>  

                    <a class="mui-control-item" href="#info4">  

                        社会推荐  

                    </a>  

                    <a class="mui-control-item" href="#info5">  

                        娱乐推荐  

                    </a>  

                    <a class="mui-control-item" href="#info6">  

                        科技推荐  

                    </a>  

                    <a class="mui-control-item" href="#info7">  

                        可乐推荐  

                    </a>  



                </div>  

            </div>  



            <div id="list_main" class="mui-slider-group">  

                <div id="info1" 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 mui-media">  

                                    <a href="javascript:;">  

                                        <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">  

                                        <div class="mui-media-body">  

                                            幸福  

                                            <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>  

                                        </div>  

                                    </a>  

                                </li>  

                                <li class="mui-table-view-cell mui-media">  

                                    <a href="javascript:;">  

                                        <img class=" mui-pull-left" src="../images/shuijiao.jpg">  

                                        <div class="mui-media-body">  

                                            木屋  

                                            <p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>  

                                        </div>  

                                    </a>  

                                </li>  

                            </ul>  

                        </div>  

                    </div>  

                </div>  

                <div id="info2" class="mui-slider-item mui-control-content">  

                    <div class="mui-scroll-wrapper">  

                        <div class="mui-scroll">  

                            <ul class="mui-table-view">  

                                <li class="mui-table-view-cell">  

                                    第2个选项卡子项-1  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第2个选项卡子项-2  

                                </li>  

                            </ul>  

                        </div>  

                    </div>  

                </div>  

            </div>  

        </div>  

    </div>  

    <script src="./js/mui.min.js"></script>  

    <script src="./js/mui.pullToRefresh.js"></script>  

    <script src="./js/mui.pullToRefresh.material.js"></script>  

    <script src="./js/app.js"></script>  

    <script src="./js/md5.js"></script>  

    <script>  

        mui.init();  



        mui.plusReady(function(){  

            var classInit = false;  

            var list_main = document.getElementById("list_main");  



            //滑动刷新列表  

            document.getElementById("slider").addEventListener('slide', function(event){  

                console.log("滚动");  

                //getInfo();  

            });  



            //创建类别回调函数  

            var classSucCallback = function(data){  

                //plus.nativeUI.toast(data.infoClass);  

                var titleObj = document.getElementById("info_class");  

                var mainObj = document.getElementById("list_main");  

                var titleInner = "";  

                var mui_active = "";  

                var mainInner = "";  

                mui.each(data.infoClass, function(key,element){  

                    console.log(element.info_class_name);  



                    if(key == 0){  

                        mui_active = " mui-active";  

                    }  

                    titleInner = titleInner   

                    + "<a class=\"mui-control-item"+ mui_active + "\" id=\""+ element.info_class_id +"\" href=\"#info" +   

                    element.info_class_id  

                    + "\">"  

                    + element.info_class_name  

                    + "</a>";  



                    mainInner = mainInner + "<div id=\"info"+ element.info_class_id + "\" class=\"mui-slider-item mui-control-content"+mui_active+"\">";  

                    mainInner = mainInner + "<div id=\"scroll"+element.info_class_id+"\" class=\"mui-scroll-wrapper\">";  

                    mainInner = mainInner + "<div class=\"mui-scroll\">";  

                    mainInner = mainInner + "</div></div></div>";  

                    mui_active = "";  

                });  



                mainObj.innerHTML = mainInner;  

                titleObj.innerHTML = titleInner;  

                classInit = true;  

                console.log(titleInner);  

                console.log(mainInner);  

                getInfo();  

            };  



            //获取列表信息  

            var infoSucCallback = function(data){  

                var l = document.getElementById("info"+selectClassId[0].getAttribute("id"));  

                var innerHtml = "<div id=\"scroll"+ selectClassId[0].getAttribute("id") +"\" class=\"mui-scroll-wrapper\">";  

                innerHtml =innerHtml + "<div class=\"mui-scroll\">";  

                innerHtml =innerHtml + "<ul class=\"mui-table-view\">";  

                if(data.info.length == 0){  

                innerHtml =innerHtml + "<li class=\"mui-table-view-cell mui-media\">";  

                    innerHtml =innerHtml + "<a href=\"javascript:;\">";  

                    innerHtml =innerHtml + "<img class=\"mui-media-object mui-pull-left\" src=\"../images/shuijiao.jpg\">";  



                    innerHtml =innerHtml + "<div class=\"mui-media-body\">";  

                    innerHtml =innerHtml + "无内容";  

                    innerHtml =innerHtml + "<p class='mui-ellipsis'>";  

                    innerHtml =innerHtml + "</p>";  

                    innerHtml =innerHtml + "</div>";  

                    innerHtml =innerHtml + "</a>";  

                    innerHtml =innerHtml + "</li>";  

                }  



                mui.each(data.info, function(key,element){  

                    console.log(element.info_title);  

                    innerHtml =innerHtml + "<li class=\"mui-table-view-cell mui-media\">";  

                    innerHtml =innerHtml + "<a href=\"javascript:;\">";  



                    innerHtml =innerHtml + "<div class=\"mui-media-body\">";  

                    innerHtml =innerHtml + element.info_title;  

                    innerHtml =innerHtml + "<p class='mui-ellipsis'>";  

                    innerHtml =innerHtml + "</p>";  

                    innerHtml =innerHtml + "</div>";  



                    mui.each(element.img_list,function(key,element){  



                        if(key == 3) return false;  

                        console.log(element);   

                        innerHtml =innerHtml + "<img class=\"mui-media-object mui-pull-left\" src=\""+ element +"\">";

//

});

                    innerHtml =innerHtml + "</a>";  

                    innerHtml =innerHtml + "</li>";  

                });  

                innerHtml =innerHtml + "</ul></div></div>";  

                //console.log(innerHtml);  

                l.innerHTML = innerHtml;  

            };  

            var selectClassId;  

            //获取某一个类别文章类别  

            var getInfo = function(){  

                    //var l = document.getElementById("info0");  

                    //console.log("getInfo");  

                    selectClassId = app.getElementsByClassName("mui-control-item mui-active");  

                    console.log("getInfo==>active_id="+selectClassId[0].getAttribute("id"));  

                    var data = {info_class_id:selectClassId[0].getAttribute("id"),width:200,height:125};  

                    app.ajax('/v1/info/getInfoTab',data,"get",false,infoSucCallback);  



            };  



            //获取类别  

            //app.ajax('/v1/info/getInfoClass',"","get",false,classSucCallback);  

        });  



        (function ($) {

// var classInit = false;

// var list_main = document.getElementById("list_main");

//

//// //创建类别回调函数

// var classSucCallback = function(data){

//

// //plus.nativeUI.toast(data.infoClass);

// var titleObj = document.getElementById("info_class");

// var mainObj = document.getElementById("list_main");

// var titleInner = "";

// var mui_active = "";

// var mainInner = "";

// mui.each(data.infoClass, function(key,element){

// //console.log(element.info_class_name);

//

// if(key == 0){

// mui_active = " mui-active";

// }

// titleInner = titleInner

// + "<a class=\"mui-control-item"+ mui_active + "\" id=\""+ element.info_class_id +"\" href=\"#info" +

// element.info_class_id

// + "\">"

// + element.info_class_name

// + "</a>";

//

// mainInner = mainInner + "<div id=\"info"+ element.info_class_id + "\" class=\"mui-slider-item mui-control-content"+mui_active+"\">";

// mainInner = mainInner + "<div id=\"scroll"+element.info_class_id+"\" class=\"mui-scroll-wrapper\">";

// mainInner = mainInner + "<div class=\"mui-scroll\">";

// mainInner = mainInner + "</div></div></div>";

// mui_active = "";

// });

//

// mainObj.innerHTML = mainInner;

// titleObj.innerHTML = titleInner;

// classInit = true;

// //console.log(titleInner);

// //console.log(mainInner);

// //getInfo();

// };

//alert("33");

//获取类别

//app.ajax('/v1/info/getInfoClass',"","get",false,classSucCallback);

            //阻尼系数  

            var deceleration = mui.os.ios?0.003:0.0009;  

            $('.mui-scroll-wrapper').scroll({  

                bounce: false,  

                indicators: true, //是否显示滚动条  

                deceleration:deceleration  

            });  



            $.ready(function() {  

                //循环初始化所有下拉刷新，上拉加载。  

                $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {  

                    $(pullRefreshEl).pullToRefresh({  

                        down: {  

                            callback: function() {  

                                var self = this;  



                                setTimeout(function() {  

                                    var ul = self.element.querySelector('.mui-table-view');  

                                    ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);  

                                    self.endPullDownToRefresh();  

                                }, 1000);  

                            }  

                        },  

                        up: {  

                            callback: function() {  

                                var self = this;  

                                setTimeout(function() {  

                                    var ul = self.element.querySelector('.mui-table-view');  

                                    ul.appendChild(createFragment(ul, index, 5));  

                                    self.endPullUpToRefresh();  

                                }, 1000);  

                            }  

                        }  

                    });  

                });  



                var createFragment = function(ul, index, count, reverse) {  

                    var length = ul.querySelectorAll('li').length;  

                    var fragment = document.createDocumentFragment();  

                    var li;  

                    for (var i = 0; i < count; i++) {  

                        li = document.createElement('li');  

                        li.className = 'mui-table-view-cell';  

                        li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));  

                        fragment.appendChild(li);  

                    }  

                    return fragment;  

                };  

            });  



        })(mui);  

    </script>  



</body>

</html>

2015-09-01 17:22

极飞 (作者)

比如原始静态的是5个类别4个字，如果动态生成的是6个类别4个字，多出来的一个类就滚动不出来

2015-09-01 17:25
极飞 (作者)

下拉列表内容，如果不替换动态下拉内容，下拉正常，如果替换列表内容，下拉就失效

2015-09-01 17:27
DCloud_UNI_FXY

回复极飞:暂不支持动态新增类别，两个方案

1.如果已知数量，那么先生成固定的结构，比如固定数量的标题和选项卡，然后动态往里边填数据

2.如果未知数量，那么等加载完毕后，生成整个完整的dom结构，然后js初始化，不要提前生成一部分

2015-09-01 17:53
极飞 (作者)

“生成整个完整的dom结构，然后js初始化”这个能说的具体一点吗

2015-09-01 18:33
极飞 (作者)

回复 DCloud_UNI_FXY:麻烦问一下mui里又针对这个控件重新初始化的函数吗

2015-09-01 20:52
DCloud_UNI_FXY

回复极飞:hello-mui里的demo里边的js代码里有初始化的js。

2015-09-02 03:26

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

滑动选项卡问题

1 个回复

公告

相关问题

滑动选项卡问题

与内容相关的链接

1 个回复

公告

相关问题