拖动式选项卡(仿android) 添加了上下拉刷新后，下拉即刷新，而不是滚动到顶后再刷新，同时还想问一下正在刷新的图标怎么移到选项卡下

分类：MUI

这是我的HTML代码

    <body>  

        <style>  
            .mui-control-content {  
                background-color: white;  
                min-height: 600px;  
            }  
            .mui-control-content .mui-loading {  
                margin-top: 50px;  
            }  
        </style>  
        <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" href="#item1mobile">  
                新闻  
            </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                音乐  
            </a>  
                    <a class="mui-control-item" href="#item3mobile">  
                sport  
            </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" id="thislist">  
                                    <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>  
                                </ul>  
                            </div>  
                        </div>  
                    </div>  

                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
            <div id="slider" class="mui-slider" style="height:50%;">  
                <div class="mui-slider-group mui-slider-loop">  
                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <a href="#">  
                            <img src="../img/yuantiao.jpg">  
                            <p class="mui-slider-title">静静看这世界</p>  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="../img/42136.jpg">  
                            <p class="mui-slider-title">静谧的田野</p>  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="../img/muwu.jpg">  
                            <p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="../img/cbd.jpg">  
                            <p class="mui-slider-title">Color of SIP CBD</p>  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="../img/yuantiao.jpg">  
                            <p class="mui-slider-title">静静看这世界</p>  
                        </a>  
                    </div>  
                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <a href="#">  
                            <img src="../img/42136.jpg">  
                            <p class="mui-slider-title">静谧的田野</p>  
                        </a>  
                    </div>  
                </div>  
                <div class="mui-slider-indicator mui-text-right">  
                    <div class="mui-indicator mui-active"></div>  
                    <div class="mui-indicator"></div>  
                    <div class="mui-indicator"></div>  
                    <div class="mui-indicator"></div>  
                </div>  
            </div>  
                <div class="mui-scroll">  
                    <ul class="mui-table-view">  
                        <li class="mui-table-view-cell">选项卡二</li>  
                    </ul>  
                </div>  

                    </div>  

                    <div id="item3mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll3" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  
                </div>  
            </div>  
        </div>  


	

  
</body>

这是我的JavaScript的代码

<script>  
            mui.init({  
                swipeBack: true,  
                /*上下拉刷新*/  
                pullRefresh:{  
                    container:"#scroll1",  
                    down:{  
                        contentdown:"下拉可以刷新",  
                        contentover:"释放立即刷新",  
                        contentrefresh:"正在刷新",  
                        callback:pulldownrefresh,  
                    }  
            }  
                /*end*/  
            });  
            (function($) {  
                $('.mui-slider-group .mui-scroll-wrapper').scroll({  
                    //indicators: true //是否显示滚动条  
                });  
                var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li></ul>';  
                var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li></ul>';  
                var item2 = document.getElementById('item2mobile');  
                var item3 = document.getElementById('item3mobile');  
                document.getElementById('slider').addEventListener('slide', function(e) {  
                    if (e.detail.slideNumber === 1) {  
                        if (item2.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item2.innerHTML += "hehehe";  
                            }, 700);  
                        }  
                    } else if (e.detail.slideNumber === 2) {  
                        if (item3.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item3.querySelector('.mui-scroll').innerHTML = html3;  
                            }, 700);  
                        }  
                    }  
                });  
                var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');  
                $('.mui-input-group').on('change', 'input', function() {  
                    if (this.checked) {  
                        sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-' + this.value;  
                        //force repaint  
                        sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));  
                    }  
                });  
            })(mui);  
            //下拉刷新  
            function pulldownrefresh()  
            {  
                    setTimeout(function(){  
                        var table=document.body.querySelector('.mui-table-view');  
                        var cells=document.body.querySelector('.mui-table-view-cell');  
                        for(var i=0;i<3;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('#scroll1').pullRefresh().endPulldownToRefresh();  
                    },1500);  

            }  
        </script>

2015-05-27 14:48 负责人:无分享