649592417@qq.com
649592417@qq.com
  • 发布:2016-06-09 21:54
  • 更新:2019-03-14 21:02
  • 阅读:8090

mui中选项卡切换加下拉刷新,动态加载数据左右轮滑无效!

分类:MUI

mui中选项卡切换加下拉刷新,动态加载数据左右轮滑无效!
具体代码如下:
json数据:```javascript
[{"title":"\u9505\u5e95","picurl":"","id":"445","plist":[{"id":"466","picurl":"http:\/\/www.baidu.com\/Uploads\/3295\/image\/20160510\/20160510151115_56636.jpg","title":"\u7ea2\u6c64\u9505\u5e95","price":"20","oldprice":"40","userid":"3295","description":"\u706b\u9505\u5e95\u6599\u79d8\u65b9(\u6b63\u5b97\u79d8\u65b9)","oncl":"36"}]},{"title":"\u8364\u83dc","picurl":"","id":"446","plist":[{"id":"467","picurl":"http:\/\/www.baidu.com\/Uploads\/3295\/image\/20160609\/20160609181009_11840.jpg","title":"\u8364\u83dc","price":"18","oldprice":"18","userid":"3295","description":"","oncl":"1"},{"id":"468","picurl":"http:\/\/www.baidu.com\/Uploads\/3295\/image\/20160609\/20160609181229_89288.jpg","title":"\u8364\u83dc1","price":"22","oldprice":"22","userid":"3295","description":"","oncl":"1"}]}]


html代码:  
```javascript  
<!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">  
        <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%;  
                z-index: 1;  
            }  
            .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 .mui-media-object{ clear: both; line-height: 90px;  min-width: 110px;  height: 90px;}  
            .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 5px}  
        </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 class="mui-scroll" id="toplist"></div>  
                </div>  
                <div class="mui-slider-group" id="mylistall"></div>  
            </div>  
        </div>  
        <script src="../js/mui.min.js"></script>  
        <script src="../js/app.js"></script>  
        <script src="../js/mui.pullToRefresh.js"></script>  
        <script src="../js/mui.pullToRefresh.material.js"></script>  
        <script>  
            var id='';  
            mui.init();  
            (function($) {  
                //阻尼系数  
                var deceleration = mui.os.ios?0.003:0.0009;  
                $('.mui-scroll-wrapper').scroll({  
                    bounce: false,  
                    indicators: true, //是否显示滚动条  
                    deceleration:deceleration  
                });  
                window.addEventListener('newsId',function(event){  
                    id =event.detail.id;  

                })  
                $.ready(function() {  
                    loaddatelist.usershoptype(id, function(rs) {  
                        var ll=rs.length,mylist='',aa='',mlist='',mylenght;  
                        for(i=1;i<=ll;i++){  
                            if(i<=1){  
                                aa+='<a class="mui-control-item mui-active" href="#item'+i+'mobile">'+rs[i-1]['title']+'</a>';  
                                mylist+='<div id="item'+i+'mobile" class="mui-slider-item mui-control-content mui-active"><div id="scroll'+i+'" class="mui-scroll-wrapper"><div class="mui-scroll"><ul class="mui-table-view">';  
                            }else{  
                                aa+='<a class="mui-control-item" href="#item'+i+'mobile">'+rs[i-1]['title']+'</a>';  
                                mylist+='<div id="item'+i+'mobile" class="mui-slider-item mui-control-content"><div id="scroll'+i+'" class="mui-scroll-wrapper"><div class="mui-scroll"><ul class="mui-table-view">';  
                            }  
                            mlist=rs[i-1]["plist"];  
                            mylenght=mlist.length;  
                            for(ii=0;ii<mylenght;ii++){    
                                mylist+='<li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="'+mlist[ii]['picurl']+'"><div class="mui-media-body">'+mlist[ii]['title']+'<p class="mui-ellipsis">'+mlist[ii]['title']+'</p></div></a></li>';  
                            }  
                            mylist+='</ul></div></div></div>';  
                        }  
                        document.getElementById("toplist").innerHTML=aa;  
                        document.getElementById("mylistall").innerHTML=mylist;  
                        alert(mylist);  
                        //循环初始化所有下拉刷新,上拉加载。  
                        $.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, 15, 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, 15));  
                                            self.endPullUpToRefresh();  
                                        }, 1000);  
                                    }  
                                }  
                            });  
                        });  
                    });  
                    mui('#toplist').on('tap', 'a', function(e) {  
                        var href=document.body.querySelector('#toplist a').href;  
                        //alert(href);  
                    });  
                    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)));  
                            li.innerHTML='<a href="javascript:;"><img class="mui-media-object mui-pull-left" src="http://www.360meimei.com/Public/images/no_logo.png"><div class="mui-media-body">幸福<p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p></div></a>';  
                            fragment.appendChild(li);  
                        }  
                        return fragment;  
                    };  
                });  
            })(mui);  
        </script>  
    </body>  

</html>  
0 关注 分享

要回复文章请先登录注册

夜明星空

夜明星空

我的是6项,给了
.mui-scroll-wrapper .mui-scroll{
width: 440px !important;
}
每一项大概是70px,左右,伪解决,还是有问题,项目可以动态给设置css,多一个加上70左右
2019-03-14 21:02
2769536052@qq.com

2769536052@qq.com

楼主解决了吗
。。。求demo
2017-09-18 11:11
1243680484@qq.com

1243680484@qq.com

mui('#pullrefresh').endPullUpToRefresh();这个总报错显示不是一个mui(...).endPullUpToRefresh is not a function
2017-07-19 13:48
OKOK

OKOK

你好请问你解决了吗?
2016-08-26 19:31
成都H5

成都H5

var deceleration = mui.os.ios ? 0.003 : 0.0009;
mui('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: deceleration
}); 这句话要放在 动态添加数据后面
2016-08-15 15:42
my87@163.com

my87@163.com

回复 649592417@qq.com: 你好!有解决吗?
2016-07-14 22:09
649592417@qq.com

649592417@qq.com (作者)

回复 五块钱的果汁: 我这里没有用到图片轮播,是带tab的下拉刷新,不能左右轮滑 !!
2016-06-12 08:18
五块钱的果汁

五块钱的果汁

动态加载需要重新初始化 请参考http://dev.dcloud.net.cn/mui/ui/#gallery
2016-06-11 22:05