详细问题描述
[内容]
首先 先说明一点,因为页面需要做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