5***@qq.com
5***@qq.com
  • 发布:2018-03-03 19:52
  • 更新:2018-07-11 17:54
  • 阅读:1831

【报Bug】mui的pullrefresh方法中经过plusReady方法改变了当前容器

分类:MUI

详细问题描述
[内容]
首先 先说明一点,因为页面需要做div模式下的多个下拉/上拉,所以将源码中的第2940行开始单个下拉/上拉改成了for循环,然后出现了如下的问题,很不解,望开发组以及项目组解答一下,谢谢。

重现步骤
再看配置:

mui.ready(function () {
//循环初始化所有下拉刷新,上拉加载。
getFootballstate();
mui.init({
pullRefresh: [{
container: '#aaa',
down: {
style: 'circle',
offset: '0px',
callback: function () {
// alert("aaaaaaaaaaaaa");
pulldownRefresh('#aaa')
}
},
up: {
height: 50, //可选.默认50.触发上拉加载拖动距离
auto: true, //可选,默认false.自动上拉加载一次
callback: function () {
// alert("bbbbbbb");
pullupRefresh('#aaa')
} //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}, {
container: '#bbb',
down: {
style: 'circle',
offset: '0px',
// auto: true,
callback: function () {
var that = this;
pulldownRefresh('#bbb')
}
},
up: {
auto: true, //可选,默认false.自动上拉加载一次
callback: function () {
var that = this;
pullupRefresh('#bbb') //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
}]
});
});

在看源码:第2940行开始

var options = $.options;
var pullRefreshOptions = options.pullRefresh || {};
pullRefreshOptions = Object.prototype.toString.call(pullRefreshOptions) == '[object Array]' ? pullRefreshOptions : [pullRefreshOptions];//这里开始改了源码
var pullRefreshOptionsS = pullRefreshOptions;
for (var pp in pullRefreshOptionsS) {
//debugger;
pullRefreshOptions = pullRefreshOptionsS[pp];
var hasPulldown = pullRefreshOptions.down && pullRefreshOptions.down.hasOwnProperty('callback');
var hasPullup = pullRefreshOptions.up && pullRefreshOptions.up.hasOwnProperty('callback');
if (hasPulldown || hasPullup) {
var container = pullRefreshOptions.container;
if (container) {
var $container = $(container);
if ($container.length === 1) {
if ($.os.plus) { //5+环境
if (hasPulldown && pullRefreshOptions.down.style == "circle") { //原生转圈
alert("未plusReady状态下第" + pp + "个容器id:" + $container[0].id);
$.plusReady(function () {//这里开始出问题了,进入这个方法后改变了容器
alert("已plusReady状态下第" + pp + "个容器id:" + $container[0].id)
//这里改写$.fn.pullRefresh
$.fn.pullRefresh = $.fn.pullRefresh_native;
$container.pullRefresh(pullRefreshOptions);
});

                } else if ($.os.android) { //非原生转圈,但是Android环境  
                    $.plusReady(function () {  
                        //这里改写$.fn.pullRefresh  
                        $.fn.pullRefresh = $.fn.pullRefresh_native  
                        var webview = plus.webview.currentWebview();  
                        if (window.__NWin_Enable__ === false) { //不支持多webview  
                            $container.pullRefresh(pullRefreshOptions);  
                        } else {  
                            if (hasPullup) {  
                                //当前页面初始化pullup  
                                var upOptions = {};  
                                upOptions.up = pullRefreshOptions.up;  
                                upOptions.webviewId = webview.id || webview.getURL();  
                                $container.pullRefresh(upOptions);  
                            }  
                            if (hasPulldown) {  
                                var parent = webview.parent();  
                                var id = webview.id || webview.getURL();  
                                if (parent) {  
                                    if (!hasPullup) { //如果没有上拉加载,需要手动初始化一个默认的pullRefresh,以便当前页面容器可以调用endPulldownToRefresh等方法  
                                        $container.pullRefresh({  
                                            webviewId: id  
                                        });  
                                    }  
                                    var downOptions = {  
                                        webviewId: id //子页面id  
                                    };  
                                    downOptions.down = $.extend({}, pullRefreshOptions.down);  
                                    downOptions.down.callback = '_CALLBACK';  
                                    //改写父页面的$.fn.pullRefresh  
                                    parent.evalJS("mui.fn.pullRefresh=mui.fn.pullRefresh_native");  
                                    //父页面初始化pulldown  
                                    parent.evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify(downOptions) + "')");  
                                }  
                            }  
                        }  
                    });  
                } else { //非原生转圈,iOS环境  
                    $container.pullRefresh(pullRefreshOptions);  
                }  
            } else {  
                $container.pullRefresh(pullRefreshOptions);  
            }  
        }  
    }  
}  

}

[结果]
结果就是在 $.plusReady(function () {}//这里开始出问题了,进入这个方法后改变了当前加载数据的容器,就一直变成了当初定义刷新数组的最后一个对象的容器,简单的说就是一个div模式下的的两个Tab,左边的没数据,右边的有,无论我在哪个tab下下拉/上拉,拖动的永远是右边的容器。有这段代码可以看出只在
plusReady,即手机上出现问题,浏览器是不会进入这里的,所以没有任何问题。

@DCloud_MUI_FXY

各位开发组的老大以及各路大神,小弟初学,希望得到指正解答,或者有更好的官方demo或者大神的demo,希望分享一下经验,麻烦了,项目比较急,先谢过各位。

[期望]
MUI同一个页面初始化多个下拉/上拉刷新,左右两边区分容器,正常加载数据

运行环境 浏览器和安卓手机(5.1)
[mui版本] Mui v3.7.2

2018-03-03 19:52 负责人:无 分享
已邀请:
5***@qq.com

5***@qq.com (作者)

上传一份代码附件,上面显示的代码太乱了

9***@qq.com

9***@qq.com

把滑块逻辑加入plusReady后就会报Uncaught TypeError: mui(...).pullRefresh(...).endPulldownToRefresh is not a function

优乐美

优乐美 - z

多个div之间切换用一个刷新容器即可 只需要每次切换时重置刷新控件

  • 优乐美

    或者使用webviewGroup 随意切换

    2018-07-11 17:56

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