使用mui+vue参照demo中的pullrefresh_with_tab.html做上啦加载后页面无法滑动

分类：MUI

mui Vue

以下是我pullrefresh_with_tab.html页面的代码，百度了很多方法试了都没有用，求大神指导下~

<!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 {  
            /*-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;  
        }  
    </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">  

                        {{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">  
                            <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">  
                            <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();  
        window.onload = function() {  
            mui('.mui-scroll-wrapper').scroll({  
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006  
            });  
        };  
        (function($) {  
            //阻尼系数  
            var deceleration = mui.os.ios ? 0.003 : 0.0009;  
            $('.mui-scroll-wrapper').scroll({  
                bounce: false,  
                indicators: true, //是否显示滚动条  
                deceleration: deceleration  
            });  
            $.ready(function() {  
                newsVue.initVuePage();  
                document.getElementById("slider").addEventListener("swipeup", function(event) {  

                });  
            });  
        })(mui);  

        var newsVue = new Vue({  
            el: '#app',  
            data: {  
                tabList: [],  
                tuijian: [],  
                redian: [],  
                beijing: [],  
                isActive: false,  
                count: 0  
            },  
            updated: function() {  
                this.$nextTick(function() {  
                    var deceleration = mui.os.ios ? 0.003 : 0.0009;  
                    mui('.mui-scroll-wrapper').scroll({  
                        bounce: false,  
                        indicators: true, //是否显示滚动条  
                        deceleration: deceleration  
                    });  

                })  

            },  
            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++;  
                    console.log(index);  
                    if(index == 0) {  
                        newsVue.tuijian = newsVue.createFragment();  
                    } else if(index == 1) {  
                        newsVue.redian = newsVue.createFragment();  
                    } else {  
                        newsVue.beijing = newsVue.createFragment();  
                    }  
                },  
                /**  
                 * 上拉加载拉取历史列表   
                 */  
                pullupRefresh: function(index) {  
                    newsVue.count++;  
                    console.log(index);  
                    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>

2018-03-22 14:50 负责人:无分享

4 个回复

7***@qq.com (作者) - 程序员一枚

希望大神们能帮我看下，实在没辙了~谢谢大家了

l28

你好，我最近也在写这个，不太熟，能给一个demo 吗

梦尋Junjie - 原来她有男朋友

这种情况你可以使用多个　ｖｕｅ解决这一的问题 , 一个

使用一个 vue,一个 <ul class="mui-table-view">
虽然这一哼麻烦, 但是嘿嘿你找不到其他的办法,
你可能会找到一些加什么 * { touch-action: pan-y; } 样式或者在绑定事件的时候 elem.addEventListener( 'touchstart', fn, { passive: false } ); 加上 { passive: false } 这个
然而啊, 加个样式倒是简单, 至于加事件的的 { passive: false } 这个嘛 ,首先你要找到事件, 问题是你找不到在哪里绑定的, 这不是关键的最关键的是这个加上了也没有用,
因为这个事件并不会存在在. 为啥不会存在当然是神仙打架啦总要死一个,

下面说说原因:>

使用 vue 和 mui组件的时候你需要注意, 不能先去初始化 mui,
需要先去初始vue , 并且要在 vue mounted 里面在初始化 mui和他的组件, 否则会出现神仙打架 ,
mui总是会打掉他绑定的事件, 造成你觉得你事件是绑定上去了,实际上并没有,
不过有些mui的组件貌似"升级了" ,非要去搞事情 , 本文中的 demo 就是,
虽然你是先初始化了 vue 在初始化mui , 但是这个组件"升级"了 , 他不干, 非要去打一架, 结果事件又被打掉了 ,
解决办法就是不搞事情 ,不搞冲突, vue 只管他需要的, 一个vue 管一个 ul ,那么vue 就不会去搞事情,
从而不会与mui 冲突. 刚开始写的时候还不知他们会打架, 总觉得很神奇,后来看多了也就明白了,
也给我留下了一个未解之谜: 为啥mui总是干不过vue(mui先绑定的事件总是会被后初始化的vue "干掉" ,自己用jQ绑定的也会被vue 移除掉,百思不得其解 : 希望哪位大神给我说说这其中的原理),

梦尋Junjie - 原来她有男朋友

/ vues vue:{ fans:null,follow:null } */
initVue: function() {
/* 第一个 /
friend.vueOne = new Vue({
el: "#vue-app-one",
data: {
fans: [],
},
mounted: function() {
friend.vueOne = this;
friend.p_vue_mui();
friend.fans.read();
}
});
/ 第二个 */
friend.vueTow = new Vue({
el: "#vue-app-tow",
data: {
follow: []
},
mounted: function() {
friend.vueTow = this;
friend.p_vue_mui();
friend.follow.read();
}
});
},

/ 计数器 /
init_index:0,
/* 需要两个初始化完毕后在初始mui /
p_vue_mui:function(){
if(++friend.init_index>=2){
friend.initMui();
}
},
deceleration: 0,
initMui: function() {
mui.init();
friend.deceleration = mui.os.ios ? 0.003 : 0.0009;
mui('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: friend.deceleration
});
mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
mui(pullRefreshEl).pullToRefresh({
up: {
callback: function() {
var self = this;
//-> 通过 this 对象来判断执行的函数
var type = self.element.dataset.friendType;
var fri = friend[type];
if (fri) {
if (fri.noMore) {
fri.self.pullUpTipsIcon.innerText = "没有了"
} else {
fri.self = self;
fri.read();
}
} else {
self.endPullUpToRefresh();
}
}
}
});
});
},
<ul id="vue-app-one" class="mui-table-view">
<ul id="vue-app-tow" class="mui-table-view">
(忽略我的 "tow -> two" )
这只是代码片段 , 只提供参考, 如果比较多你可以使用多个页面来完成, 或者用对象就像我 initVue 的注释那样

该问题目前已经被锁定, 无法添加新回复

使用mui+vue参照demo中的pullrefresh_with_tab.html做上啦加载后页面无法滑动

4 个回复

公告

相关问题

使用mui+vue参照demo中的pullrefresh_with_tab.html做上啦加载后页面无法滑动

与内容相关的链接

4 个回复

公告

相关问题