问题:在竖屏查看选项卡2的时候,查看的子项都是属于选项卡2的(图1)
;接着从竖屏转成横屏,查看到的子项变成了属于选项卡1的(图2)
;然后从横屏转成竖屏,查看到的子项又变成属于选项卡3的(图3)
。查看选项卡3时也会重复出现以上问题。测试过选项卡少于或等于2个时该问题不存在。
代码:
<div class="mui-content">
<div id="slider" 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 class="mui-control-item mui-active" id="collectBtn" href="#listLDBWDaiBan">
待办
</a>
<a class="mui-control-item" id="collectBtn2" href="#listLDBWYiBan">
已办
</a>
<a class="mui-control-item" id="collectBtn3" href="#listLDBWDaiYue">
待阅
</a>
<a class="mui-control-item" id="collectBtn4" href="#listLDBWYiYue">
已阅
</a>
</div>
</div>
<div class="mui-slider-group">
<div id="listLDBWDaiBan" class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll" id="daiBanList">
<ul class="mui-table-view" id="taskContainer4">
</ul>
</div>
</div>
</div>
<div id="listLDBWYiBan" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll" id="yiBanList">
<ul class="mui-table-view" id="taskContainer5">
</ul>
</div>
</div>
</div>
<div id="listLDBWDaiYue" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll" id="daiYueList">
<ul class="mui-table-view" id="taskContainer6">
</ul>
</div>
</div>
</div>
<div id="listLDBWYiYue" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll" id="yiYueList">
<ul class="mui-table-view" id="taskContainer7">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
//阻尼系数
var deceleration = mui.os.ios ? 0.003 : 0.0009;
mui('.mui-scroll-wrapper').scroll({
bounce: true,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'),
function(index, pullRefreshEl) {
mui(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
console.log('downing');
var self = this;
console.log(index);
setTimeout(function() {
if(index === 0) {
todoList4.pulldownRefreshHandle(self);
} else if(index === 1) {
todoList5.pulldownRefreshHandle(self);
} else if(index === 2) {
todoList6.pulldownRefreshHandle(self);
} else if(index === 3) {
todoList7.pulldownRefreshHandle(self);
} else {
this.endPullDownToRefresh();
}
}, 1000);
}
}
});
}
);