mui集成iscroll 5 以及下拉，上拉刷新

由于mui中自带的下拉组件存在bug，一个项目中无法有多个，因此改造了iscroll5作为下拉刷新的组件，以下是代码，请参考。

首先是页面布局，iscroll的推荐的wrapper和scroller两个div，也使用了mui的一些样式。

<div id="wrapper" class="mui-content mui-iscroll-wrapper">  
                <div id="scroller">  
                    <div id="pullDown" class="ub ub-pc c-gra">  
                        <div id="pullDownIcon"></div>  
                        <div id="pullDownLabel">下拉刷新</div>  
                    </div>  
                    <ul class="mui-table-view mui-table-view-chevron" id="dataList"></ul>  
                    <div id="pullUp" class="ub ub-pc c-gra">  
                        <div id="pullUpIcon"></div>  
                        <div id="pullUpLabel">上拉显示更多...</div>  
                    </div>  
                </div>  
</div>

样式的css，主要是下拉和上拉以后的一些样式定义，比较简陋

<style>  
            #wrapper {  
                position: absolute;  
                top: 40px;  
                bottom: 0px;  
                left: 0;  
                width: 100%;  
                background: #ccc;  
                overflow: hidden;  
            }  
            #pullDown,  
            #pullUp {  
                height: 40px;  
                line-height: 40px;  
                padding: 5px 10px;  
                font-weight: bold;  
                font-size: 14px;  
                color: #888;  
            }  
            #pullDown .pullDownIcon,  
            #pullUp .pullUpIcon {  
                display: block;  
                float: left;  
                width: 40px;  
                height: 40px;  
                background: url(img/pull-icon@2x.png) 0 0 no-repeat;  
                -webkit-background-size: 40px 80px;  
                background-size: 40px 80px;  
                -webkit-transition-property: -webkit-transform;  
                -webkit-transition-duration: 250ms;  
            }  
            #pullDown .pullDownIcon {  
                -webkit-transform: rotate(0deg) translateZ(0);  
            }  
            #pullUp .pullUpIcon {  
                -webkit-transform: rotate(-180deg) translateZ(0);  
            }  
            #pullDown.flip .pullDownIcon {  
                -webkit-transform: rotate(-180deg) translateZ(0);  
            }  
            #pullUp.flip .pullUpIcon {  
                -webkit-transform: rotate(0deg) translateZ(0);  
            }  
            #pullDown.loading .pullDownIcon,  
            #pullUp.loading .pullUpIcon {  
                background-position: 0 100%;  
                -webkit-transform: rotate(0deg) translateZ(0);  
                -webkit-transition-duration: 0ms;  
                -webkit-animation-name: loading;  
                -webkit-animation-duration: 2s;  
                -webkit-animation-iteration-count: infinite;  
                -webkit-animation-timing-function: linear;  
            }  
            .-webkit-keyframes loading {  
                from {  
                    -webkit-transform: rotate(0deg)translateZ(0);  
                }  
                .to {  
                    -webkit-transform: rotate(360deg) translateZ(0);  
                }  
            }  
        </style>  

关键的js代码

var firstresult = 0;  
                    var pagesize = 20;  
                    var stocktype = 0;  

                    var myScroll;  
                    var pullDownEl, pullDownL;  
                    var pullDownc, pullUpc;  
                    var pullUpEl, pullUpL;  
                    var Downcount = 0,  
                        Upcount = 0;  
                    var loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新    

                    function pullDownAction() { //下拉事件    
                        setTimeout(function() {  
                            var el, li, i;  
                            //plus.nativeUI.showWaiting();  
                            console.log('触发了下拉更多');  
                            removeClass(pullDownEl, 'loading');  
                            pullDownL.innerHTML = '下拉显示更多...';  
                            pullDownEl['class'] = pullDownEl.className;  
                            pullDownEl.className = '';  
                            pullDownEl.style.display = 'none';  
                            initData(stocktype);  

                            loadingStep = 0;  
                            //plus.nativeUI.closeWaiting();  
                        }, 1000); //1秒    
                    }  

                    function pullUpAction() { //上拉事件    
                        setTimeout(function() {  
                            var el, li, i;  
                            console.log('出发了上拉刷新事件');  
                            removeClass(pullUpEl, 'loading');  
                            pullUpL.innerHTML = '上拉显示更多...';  
                            pullUpEl['class'] = pullUpEl.className;  
                            pullUpEl.className = '';  
                            pullUpEl.style.display = 'none';  
                            nextPage(stocktype);  
                            //myScroll.refresh();  
                            loadingStep = 0;  
                        }, 1000);  
                    }  

                    function loaded() {  
                        pullDownEl = document.getElementById('pullDown');  
                        pullDownL = document.getElementById('pullDownLabel');  

                        pullDownEl['class'] = pullDownEl.className;  
                        pullDownEl.className = '';  
                        pullDownEl.style.display = 'NONE';  

                        pullUpEl = document.getElementById('pullUp');  
                        pullUpL = document.getElementById('pullUpLabel');  
                        pullUpEl['class'] = pullUpEl.className;  
                        pullUpEl.style.display = 'NONE';  

                        myScroll = new IScroll('#wrapper', {  
                            probeType: 2, //probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。    
                            scrollbars: true, //有滚动条    
                            mouseWheel: true, //允许滑轮滚动    
                            fadeScrollbars: true, //滚动时显示滚动条，默认影藏，并且是淡出淡入效果    
                            bounce: true, //边界反弹    
                            interactiveScrollbars: true, //滚动条可以拖动    
                            shrinkScrollbars: 'scale', // 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.    
                            click: true, // 允许点击事件    
                            keyBindings: true, //允许使用按键控制    
                            momentum: true // 允许有惯性滑动    
                        });  

                        //滚动时    
                        myScroll.on('scroll', function() {  
                            if (loadingStep == 0 && !pullDownEl.className.match('flip|loading') && !pullUpEl.className.match('flip|loading')) {  
                                if (this.y > 5) {  
                                    //下拉刷新效果    
                                    pullDownEl.className = pullUpEl['class'];  
                                    pullDownEl.style.display = '';  
                                    myScroll.refresh();  
                                    pullDownEl.className += 'flip';  
                                    pullDownL.innerHTML = '准备刷新...';  
                                    loadingStep = 1;  
                                } else if (this.y < (this.maxScrollY - 5)) {  
                                    //上拉刷新效果    
                                    pullUpEl.className = pullUpEl['class'];  
                                    pullUpEl.style.display = '';  
                                    myScroll.refresh();  
                                    pullUpEl.className += 'flip';  
                                    pullUpL.innerHTML = '准备刷新...';  
                                    loadingStep = 1;  
                                }  
                            }  
                        });  
                        //滚动完毕    
                        myScroll.on('scrollEnd', function() {  
                            if (loadingStep == 1) {  
                                if (pullUpEl.className.match('flip|loading')) {  
                                    removeClass(pullUpEl, 'flip');  
                                    addClass(pullUpEl, 'loading');  

                                    pullUpL.innerHTML = 'Loading...';  
                                    loadingStep = 2;  
                                    pullUpAction();  
                                } else if (pullDownEl.className.match('flip|loading')) {  
                                    removeClass(pullDownEl, 'flip');  
                                    addClass(pullDownEl, 'loading');  

                                    pullDownL.className = 'Loading...';  
                                    loadingStep = 2;  
                                    pullDownAction();  
                                }  
                            }  
                        });  
                        //初始化数据  
                        initData();  
                    }  

                    function initData() {  
                        firstresult = 0;  
                        getData('0', stocktype);  
                        document.getElementById("dataList").innerHTML ='';  
                        //refresh  
                        myScroll.refresh();  
                    }  

                    function nextPage() {  
                        firstresult += pagesize;  
                        getData('1', stocktype);  
                        myScroll.refresh();  
                    }  

                    function getData(flag) {  
                        var url = ‘’;  

                        JSONP({  
                            url: url,  
                            data: {  
                                firstresult: firstresult,  
                                maxcount: pagesize  
                            },  
                            success: function(data) {  

                                var source = document.getElementById("contact-template").innerHTML;  
                                var template = Handlebars.compile(source);  
                                var wos = {  
                                    wos: data.result  
                                };  
                                if (flag == '1') {  
                                    document.getElementById("dataList").innerHTML += template(wos);  
                                } else {  
                                    document.getElementById("dataList").innerHTML = template(wos);  
                                }  

                            },  
                            error: function(data) {  
                                console.log(objToString(data));  
                            }  
                        });  
                    }

项目用了handlerbars。