是这样的,在slider组件中点击一个按钮,隐藏真个slider组件,显示一个div(包含上拉加载和下拉刷新),当选择pullRefresh中的一项时,要隐藏pullRefresh,显示slider组件。如果当点击pullRefresh生成项时,未关闭软键盘,就会出现mui-control-item和mui-slider-item选中项不一致。
大佬们,帮忙看看。
<div class="mui-content inner">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl"
class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-5
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div id="scroll3" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="negative">
</div>
</form>
</div>
<form class="mui-input-group">
<div class="mui-input-row" id="wfdd">
<label>选择地点</label>
<span style="height: 40px;line-height: 40px;">请选择地点</span>
<a class="mui-navigate-right"></a>
</div>
</form>
</div>
<div class="mui-content wfdd">
<div class="mui-input-row mui-search">
<input type="search" id="search" class="mui-input-clear" placeholder="请输入关键字">
<button class="mui-btn mui-btn-primary" type="button" id="query">搜索</button>
</div>
<div id="pullRefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">item1</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">item1</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">item1</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">item1</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">item1</a>
</li>
</ul>
</div>
</div>
</div>
<script src="../js/framework/mui.min.js"></script>
<script>
mui.init({
swipeBack: false
});
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: false //是否显示滚动条
});
var html2 =
'<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
var html3 =
'<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
document.getElementById('slider').addEventListener('slide', function(e) {
if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) {
setTimeout(function() {
item2.querySelector('.mui-scroll').innerHTML = html2;
}, 500);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.querySelector('.mui-scroll').innerHTML = html3;
}, 500);
}
}
});
var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
sliderSegmentedControl.className =
'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-' +
this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
})(mui);
mui(".mui-content").on('tap', '#wfdd', function() {
mui(".wfdd")[0].style.display = "block";
mui(".inner")[0].style.display = "none";
})
mui("#pullRefresh").on('tap', '.mui-table-view .mui-table-view-cell', function() {
document.activeElement.blur();
mui('.wfdd')[0].style.display = 'none';
mui('.inner')[0].style.display = '';
mui('#slider').slider().gotoItem(3);
})
</script>