VUE与MUI整合上拉/下拉

MUI的上拉/下拉刷新

如果页面中只包含上拉/下拉刷新部分以及header/footer部分，那么只需要参考官方文档即可，稍微细心一点，实现起来问题不大

官方文档:下拉/上拉官方文档

由VUE负责数据加载,MUI复杂上拉/下拉

mui中用的最多，问题最多的可能就是上拉/下拉刷新还有与它关联的各种问题了，可谓千奇百怪无奇不有。

VUE与MUI整合，最常见的问题是明明数据已加载，但是就是无法上拉/下拉，或者上拉/下拉触发的位置不对。

因水平有限，直接对mui框架进行修改实在没把握，也没那么多时间来看代码，因此选用mui已重写的上拉/下拉组件来进行修改。原始代码是Mui的demo项目里面的
pullrefresh_with_tab.html 。选这个的一个原因是在它的基础上可以很容易的实现页面的部分上拉/下拉，而其他部分不变，比如在页面最上方放一个固定的搜索框之类的。另一个原因是这是一个独立的组件，方便修改，代码也比mui框架简单和清晰。

HTML页面代码

直接采用demo的样式，把自己需要的dom添加进去就可以了

        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"><span class=" mui-icon mui-icon-left-nav "></span> </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-input-row mui-search">  
                        <input type="search" v-model="keyword" placeholder="搜索" style="margin-bottom: 0px;">  
                    </div>  

                </div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="pullrefresh" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <!--数据列表-->  
                                <ul class="mui-table-view " id="stuffs_ul" style="margin-top: 10px;">  
                                    <template v-for="stuff in stuffs ">  

    //vue加载的li元素                                </template>  

                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </body>

JS代码

对mui.pullToRefresh.js进行了一些改动，修复一些我自己使用vue碰到的问题

上拉/下拉刷新触发的时机不对

比如不管在列表的哪里下拉都触发下拉刷新这一类的问题，解决办法是在判断是否上拉/下拉时判断是否滚动到顶部/底部

_canPullUp: function() {  
            if(this.removing) {  
                return false;  
            }  

            if(this.isInScroll) {  
                var scrollId = this.element.parentNode.getAttribute('data-scroll');  
                if(scrollId) {  
                    var scrollApi = $.data[scrollId];  
                    return scrollApi.y === scrollApi.maxScrollY;  
                }  
            }  
            /**  
             * 修改上拉判断条件  
             */  
            console.log('上拉位置' + this.element.scrollTop + '  ' + this.element.clientHeight + '  ' + this.element.scrollHeight)  
            if(this.element) {  
                return this.element.scrollTop + this.element.clientHeight >= this.element.scrollHeight;  
            }  
            return window.pageYOffset + window.innerHeight + this.options.up.offset >= document.documentElement.scrollHeight;  
        },  
        _canPullDown: function() {  
            if(this.removing) {  
                return false;  
            }  
            if(this.isInScroll) {  
                var scrollId = this.element.parentNode.getAttribute('data-scroll');  
                if(scrollId) {  
                    var scrollApi = $.data[scrollId];  
                    return scrollApi.y === 0;  
                }  
            }  
            /**  
             * 修改下拉判断条件  
             */  
            console.log('下拉位置' + document.body.scrollTop + '  ' + this.element.scrollTop)  
            if(this.element) {  
                return this.element.scrollTop <= 0;  
            }  
            return document.body.scrollTop === 0;  
        },

数据加载完成后，底部的“上拉提示提示条”位置不对

比如不可见，或者显示在列表中间而不是底部等
解决办法是在上拉/下拉结束后重新获取列表的高度，然后设置底部提示条的top值

        fixBottomTip: function() {  
            if(this.element && this.element.querySelector('.mui-pull-bottom-tips')) {  
                if(!this.element.querySelector('.mui-scroll')) {  
                    this.element.querySelector('.mui-pull-bottom-tips').style.top = this.element.scrollHeight - 40 + 'px'  
                } else {  
                    this.element.querySelector('.mui-pull-bottom-tips').style.top = this.element.querySelector('.mui-scroll').scrollHeight + 'px'  
                }  
            }  
        },

另外还需要设置mui-pull-bottom-tips的position属性

.mui-pull-bottom-tips {  
    text-align: center;  
    background-color: #efeff4;  
    font-size: 15px;  
    line-height: 40px;  
    color: #777;  
    width: 100%;  
    position: absolute;  
}  

其他问题

使用vue后，上下或者左右滚动无效

这个问题产生原因应该是vue渲染dom后无法撑开它的上一级容器，具体什么原因我也搞不懂，
有个解决办法就是设置滚动的容器的overflow值为auto

.mui-content.mui-scroll-wrapper {  
    overflow: auto;  
}  

.mui-slider.mui-fullscreen .mui-slider-group .mui-control-content .mui-scroll-wrapper {  
    overflow: auto;  
}

总结

修改完成后，在手机浏览器，IOSAPP,ANDROIDAPP测试都正常，包括单webviewhe双webview

文件下载

本文链接：http://blog.betweenfriends.cn/post/vuemuiscrollfixmethod.html