786914253@qq.com
786914253@qq.com
  • 发布:2018-03-26 17:13
  • 更新:2018-03-26 17:13
  • 阅读:1752

使用muidemo中的pullrefresh_with_tab.html+vue.js遇到列表不能滑动问题解决办法

分类:MUI

踩过很多坑,终于被我摸索出来了,按照我这个模板就可以滑动,如有问题可以留言相互探讨。

<!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-scroll-wrapper {  
            position: absolute;  
            overflow: hidden;  
            bottom: 0;  
        }  

        .mui-scroll {  
            position: absolute;  
        }  

        .mui-pull-top-tips.mui-transitioning {  
            -webkit-transition-duration: 200ms;  
            transition-duration: 200ms;  
        }  

        .mui-pull-top-tips .mui-pull-loading {  
            s  
            /*-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-slider .mui-slider-group .mui-slider-item {  
            width: 100%;  
            height: 100%;  
        }  
    </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">选项卡切换+下拉刷新(div模式)</h1>  
    </header>  
    <div class="mui-content" id="app">  
        <div 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">  
                    <!--<a v-for="(index,item) in tabList" v-bind:class="[mui-control-item,{mui-active:isActive}]" v-bind:href="'#item'+idnex+'mobile'">  
                        {{item.title}}  
                    </a>-->  
                    <a class="mui-control-item mui-active" href="#item1mobile">  
                        推荐  
                    </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                        热点  
                    </a>  
                    <a class="mui-control-item" href="#item3mobile">  
                        北京  
                    </a>  
                </div>  
            </div>  
            <div id="slider" class="mui-slider-group">  
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper mui-active">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view">  
                            <li v-for="item in tuijian" class="mui-table-view-cell">  
                                {{item.title}}  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
                <div id="item2mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view mui-table-view-chevron">  
                            <li v-for="item in redian" class="mui-table-view-cell">  
                                {{item.title}}  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
                <div id="item3mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view mui-table-view-chevron">  
                            <li v-for="item in beijing" class="mui-table-view-cell">  
                                {{item.title}}  
                            </li>  
                        </ul>  
                    </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/utils/vue.js"></script>  
    <script src="../../js/utils/app.js"></script>  
    <script type="text/javascript">  
        mui.init();  
        (function($) {  
            //阻尼系数  
            $.ready(function() {  
                newsVue.initVuePage();  
            });  
        })(mui);  

        var newsVue = new Vue({  
            el: '#app',  
            data: {  
                tuijian: [],  
                redian: [],  
                beijing: [],  
                isActive: false,  
                count: 0  
            },  
            updated: function() {  
                this.$nextTick(function() {  

                })  

            },  
            methods: {  
                initVuePage: function() {  
                    console.log("AAAAAAAAA");  
                    //循环初始化所有下拉刷新,上拉加载。  
                    mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {  
                        mui(pullRefreshEl).pullToRefresh({  
                            down: {  
                                callback: function() {  
                                    var self = this;  
                                    setTimeout(function() {  
                                        newsVue.pulldownRefresh(index);  
                                        self.endPullDownToRefresh();  
                                    }, 1000);  
                                }  
                            },  
                            up: {  
                                callback: function() {  
                                    var self = this;  
                                    setTimeout(function() {  
                                        newsVue.pullupRefresh(index);  
                                        self.endPullUpToRefresh();  
                                    }, 1000);  
                                }  
                            }  
                        });  
                    });  
                },  
                /**  
                 *  下拉刷新获取最新列表   
                 */  
                pulldownRefresh: function(index) {  
                    newsVue.count++;  
                    if(index == 0) {  
                        newsVue.tuijian = newsVue.createFragment();  
                    } else if(index == 1) {  
                        newsVue.redian = newsVue.createFragment();  
                    } else {  
                        newsVue.beijing = newsVue.createFragment();  
                    }  

                    //                      console.log(JSON.stringify(newsVue.newsList[index]));  
                },  
                /**  
                 * 上拉加载拉取历史列表   
                 */  
                pullupRefresh: function(index) {  
                    newsVue.count++;  
                    if(index == 0) {  
                        newsVue.tuijian = newsVue.createFragment();  
                    } else if(index == 1) {  
                        newsVue.redian = newsVue.createFragment();  
                    } else {  
                        newsVue.beijing = newsVue.createFragment();  
                    }  
                },  
                createFragment: function() {  
                    var newItems = [];  
                    for(var i = 0; i < 5 * newsVue.count; i++) {  
                        newItems.push({  
                            title: "第" + i + "个例子"  
                        });  
                    }  
                    return newItems;  
                }  
            }  
        });  
    </script>  
</body>  

</html>

0 关注 分享

要回复文章请先登录注册