侧滑和上拉下拉刷新不能共用

分类：MUI

上拉加载侧滑菜单

首先我使用了侧滑左菜单，然后使用上下刷新功能，上拉刷新和下拉刷新并不是使用2个页面(例子的父子2个页面方式)，就是存在一个页面中。这时候我发现内容页面(上拉下拉区域)是空白，但是当我测试拉动的部分界面的时候，右边内容区域又出现了，IOS7.1.2设备，请问这样使用正确吗？
代码：
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title" >最新资讯</h1>
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-right"></a>
</header>
<aside id="offCanvas" class="mui-off-canvas-left"></aside>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron" id="content-ul">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../../images/shuijiao.jpg">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>

2014-11-05 10:50 负责人:无分享

7 个回复

dannyTang

好像是安卓上不支持

忘语忘行

貌似没得问题，当然我没在苹果手机上测试，谷歌浏览器上试了下是可以的，单页面下拉刷新在Android上要改源码，测试也是可以的，Android下修改方法可以看我之前的问答
http://ask.dcloud.net.cn/question/21313
下面demo，测试可行

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <title>侧滑菜单+下拉刷新</title>  
    <link href="../../css/mui.css" rel="stylesheet"/>  
    <link href="../../css/style.css" rel="stylesheet"/>  
</head>  
<body>  
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">  
        <!--侧滑菜单-->  
        <aside id="offCanvasSide" class="mui-off-canvas-left">  
            <div style="color:#FFF;">  
                这是侧滑菜单  
            </div>  
        </aside>  
        <!--主内容部分-->  
        <div class="mui-inner-wrap" id="demo">  
            <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 id="pullrefresh" v-el:pullrefresh class="mui-content mui-scroll-wrapper" style="min-height: 100%;">  
                <div class="mui-scroll">  
                    <!--数据列表-->  
                    <ul class="mui-table-view mui-table-view-chevron">  
                        <li v-for="item in lists" class="mui-table-view-cell">  
                            <a class="mui-navigate-right">{{item.text}}</a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
            <div class="mui-off-canvas-backdrop"></div>  
        </div>  
    </div>  
    <script>var h5pullDown = true;</script>  
    <script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>  
    <script src="../lib/mui.js"></script>  
    <script>  
        var vm = new Vue({  
            el:'#demo',  
            data:{  
                lists:[]  
            },  
            ready:function(){  
                var _this = this;   
                mui.init({  
                    pullRefresh: {  
                        container: _this.$els.pullrefresh,  
                        down: {  
                            callback: _this.pulldownRefresh  
                        },  
                        up: {  
                            contentrefresh: '正在加载...',  
                            callback: _this.pullupRefresh  
                        }  
                    }  
                });  
                var len = this.lists.length;  
                for(var i=1;i<=20;i++){  
                    this.lists.push({text:'Item '+(len+i)});  
                }  
                mui.ready(function() {  
                    mui(_this.$els.pullrefresh).pullRefresh().pullupLoading();  
                });  

            },  
            methods:{  
                pulldownRefresh:function(){  
                    console.log("pulldownRefresh");  
                    var len = this.lists.length;  
                    setTimeout(function() {  
                        for(var i=1;i<=3;i++){  
                            this.lists.unshift({text:'Item '+(len+i)});  
                        }  
                        mui(this.$els.pullrefresh).pullRefresh().endPulldownToRefresh();  
                    }.bind(this),1500);  

                },  
                pullupRefresh:function(){  
                    console.log("pullupRefresh");  
                    var len = this.lists.length;  
                    setTimeout(function() {  
                        mui(this.$els.pullrefresh).pullRefresh().endPullupToRefresh((len > 40));  
                        for(var i=1;i<=3;i++){  
                            this.lists.push({text:'Item '+(len+i)});  
                        }  
                    }.bind(this),1500);  
                }  
            }  
        });  

    </script>  
</body>  
</html>

SixGodWill

修改完真的是可以了，十分感谢！困扰一天，连带做梦。

2018-04-03 09:34
鹏鹏啊

给大神跪下。。。。困扰两天了，终于解决了！

2019-07-29 15:50

dannyTang

同问，是不支持吗

dannyTang

浏览器上是可以，安卓上不行

忘语忘行

Android上要改源码

2016-07-27 17:48

5***@qq.com

自己写个下拉上拉吧，用mui超简单，只要定义上下拉事情可用就可以了
然后document加事件监听这两个事件，到顶了和到底了都会触发！
在这个时候显示一下加载的view,就行了，业务自己写，不需要系统的

mui.init({  
                    gestureConfig:{  
                        swipeup:true,  
                        swipedown:true,  
                        dragstart:true,  
                        drag:true,  
                        dragend:true  
                    }  
                });

document.addEventListener("swipeup",function(){  
                        $("#moreFeedbackContainer").css("display","");  
                        setTimeout(function(){  
                            GetDataByAjax();  
                            $("#moreFeedbackContainer").css("display","none");  
                        },5000);  
                    })

GetDataByAjax();就是我的业务

1***@qq.com

mark

FYC - 80后IT男

确实，系统的相互影响，上下拉管用，但滚动条又不行了。

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

侧滑和上拉下拉刷新不能共用

7 个回复

公告

相关问题

侧滑和上拉下拉刷新不能共用

与内容相关的链接

7 个回复

公告

相关问题