详细问题描述
首先我的业务是两个选项卡，一个搜索功能，两个刷新组件。
带选项卡的pullToRefresh插件，最开始的时候没问题，当两个选项卡的数据都加载完也就是，上拉加载直到组件都执行了没有数据的endPullUpToRefresh(true)方法后，再去用搜索功能重置刷新组件（refresh(true)方法），这时候选项卡切换就会出问题，而且在页面上稍微动一下两个刷新组件会同时执行上拉加载。
注：代码部分js和css均为外网引入，直接创建HTML文件复制即可使用。简单粗暴！
重现步骤
1，打开页面，两个选项卡均手动操作上拉加载数据，直到没有数据出现。
2，点击搜索栏，直接按回车搜索，会刷新组件并更新数据。
3，然后左右滑动目的是实现选项卡切换，但此时两个组件都执行了上拉加载，而左右滑动选项卡变得很难操作。
期望
两个组件加载完数据，搜索之后，选项卡扔可自由切换，组件直接上下拉不会冲突
运行环境
谷歌浏览器手机调试模式
[mui版本] 3.3.0
附件
<!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" />
<title></title>
<link rel="stylesheet" href="http://dcloud.io/hellomui/css/mui.min.css" />
<style>
html,
body {
background-color: #efeff4;
}
.mui-bar~.mui-content .mui-fullscreen {
top: 44px;
height: auto;
}
.mui-pull-top-tips {
position: absolute;
top: -20px;
left: 50%;
margin-left: -25px;
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 1;
}
.mui-bar~.mui-pull-top-tips {
top: 24px;
}
.mui-pull-top-wrapper {
width: 42px;
height: 42px;
display: block;
text-align: center;
background-color: #efeff4;
border: 1px solid #ddd;
border-radius: 25px;
background-clip: padding-box;
box-shadow: 0 4px 10px #bbb;
overflow: hidden;
}
.mui-pull-top-tips.mui-transitioning {
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
/*-webkit-backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;*/
margin: 0;
}
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner {
margin-top: 7px;
}
.mui-pull-top-wrapper .mui-icon.mui-reverse {
/*-webkit-transform: rotate(180deg) translateZ(0);*/
}
.mui-pull-bottom-tips {
text-align: center;
background-color: #efeff4;
font-size: 15px;
line-height: 40px;
color: #777;
}
.mui-pull-top-canvas {
overflow: hidden;
background-color: #fafafa;
border-radius: 40px;
box-shadow: 0 4px 10px #bbb;
width: 40px;
height: 40px;
margin: 0 auto;
}
.mui-pull-top-canvas canvas {
width: 40px;
}
.mui-slider-indicator.mui-segmented-control {
background-color: #efeff4;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">新闻</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item mui-active" href="#home">
国内
</a>
<a class="mui-control-item" href="#international">
国际
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
<div class="mui-input-row mui-search">
<input id="search" type="search" class="mui-input-clear" placeholder="搜索">
</div>
<div class="mui-slider-group" style="top: 76px;">
<div id="home" class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed oes-list"></ul>
</div>
</div>
</div>
<div id="international" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed oes-list"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--新闻列表模版-->
<script id="listTpl" type="text/x-handlebars-template">
{{#each this}}
<li class="mui-table-view-cell cell-tip">
<a class="mui-navigate-right"">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<p class="mui-ellipsis-2">{{title}}</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</a>
</li>
{{/each}}
</script>
<script src="http://dcloud.io/hellomui/js/mui.min.js"></script>
<script src="http://dcloud.io/hellomui/js/mui.pullToRefresh.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<script>
mui.init();
//数据
var dataTpl = {
"policy": [
{
"title": "第一条中国海洋工程咨询协会关于申报2017年度海洋工程科学技术奖的通知",
},
{
"title": "第2条中国海洋工程咨询协会关于申报2017年度海洋工程科学技术奖的通知",
}
],
"policyL": []
},
dataJson,
pageNoArr = [1, 1], //请求数据的页码(国内，国际)
//注册模板
template = Handlebars.compile(document.getElementById('listTpl').innerHTML),
//刷新组件
refresh1,
refresh2;
//国内刷新
refresh1 = refresh('#home', 0);
//国际刷新
refresh2 = refresh('#international', 1);
//刷新方法
function refresh(id, type){
return mui(id + ' .mui-scroll').pullToRefresh({
down: {
callback: function(){
var self = this;
setTimeout(function() {
//请求数据
pageNoArr[type] = 1;
dataJson = dataTpl.policy;
var ul = self.element.querySelector('.mui-table-view');
ul.innerHTML = template(dataJson);
self.endPullDownToRefresh();
}, 1000);
}
},
up: {
auto: true,
callback: function() {
var self = this;
setTimeout(function() {
//请求数据
dataJson = dataTpl.policy;
pageNoArr[type] == 3 && (dataJson = dataTpl.policyL);
if( dataJson.length == 0 ){
//没有数据
self.endPullUpToRefresh(true);
return;
}
pageNoArr[type] ++;
var ul = self.element.querySelector('.mui-table-view');
ul.innerHTML += template(dataJson);
self.endPullUpToRefresh();
}, 1000);
}
}
});
}
//给搜索框添加事件
document.getElementById('search').addEventListener('keydown', function(e) {
if(13 == e.keyCode) {
//重置页码
pageNoArr = [1, 1];
//数据清空
document.querySelectorAll('.mui-table-view').forEach(function(e, index){
e.innerHTML = '';
});
//重置刷新组件,并触发一次上拉
refresh1.refresh(true);
refresh2.refresh(true);
refresh1.pullUpLoading();
refresh2.pullUpLoading();
}
});
</script>
</body>
</html>联系方式
[QQ] 610793443
[电话]
0 个回复