我使用顶部选项卡+webview的形式,webview里使用了下拉刷新,选项卡是可以滑动的(整个选项卡,因为选项比较多),但是我使用了
down: {
height: 40,
callback: pulldownRefresh
},
这个之后选项卡就不能划了。这是为什么,有什么办法能解决吗?我是新人,选项大家

- 发布:2016-08-17 11:41
- 更新:2016-08-18 10:39
- 阅读:3404

OKOK (作者)
<div class="mui-slider">
<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item" href="T1/tab_1.html" data-index="1">11111</a>
<a class="mui-control-item" href="T1/tab_2.html" data-index="2">22222</a>
<a class="mui-control-item" href="T1/tab_3.html" data-index="3">33333</a>
<a class="mui-control-item" href="T1/tab_3.html" data-index="4">44444</a>
<a class="mui-control-item" href="T1/tab_3.html" data-index="5">55555</a>
</div>
</div>
<!--<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>-->
</div>
这个是父webview
mui.init({
pullRefresh: {
container: "#pullrefresh", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down: {
height: 40,
callback: pulldownRefresh
},
up: {
contentRefresh: '正在加载....',
callback: pullupRefresh
}
}
});
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for(var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新,新纪录插到最前面;
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for(var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1500);
}
if(mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
这个是下拉刷新的JS

赵梦欢 - 专注前端,乐于分享!
代码看了,去掉了你说的那个,也不能滚动,不知道你是想实现什么功能,选项卡切换还是webview也可以滚动,如果是一般的webview切换,可以参考tababr-webview,https://segmentfault.com/a/1190000005340854。如果是webview模式选项卡实现滑动切换,参考这篇文章:http://ask.dcloud.net.cn/article/780

Trust - 少说废话
关于问题
滑动切换的示例是div模式选项卡切换,父子页面形式就已经是webview模式了。这两者是有很大区别的,所以不是简单套一下就可以直接用了。
选项卡切换
首先,选项卡大致分为两种模式,div模式和webview模式,在Hello mui示例中也有很明显的区分。
DIV模式
div模式也就是在单个html文件中,实现切换,每个选项对应的内容都在一个html文件中。Hello mui中下拉刷新示例中的“选项卡切换+下拉刷新”采用的就是这种模式,并且是依赖示例中的JS插件的。
webview模式
webview模式的选项卡,在真机运行Hello mui示例时可以预览。这种模式下,每个webview各司其职,分别加载对应的html文件,也就是说整体的元素内容,被拆开放置于各个webview中。也就是说,你在A窗口滑动,B窗口并不会受到影响(不是绝对不受影响)。
webview模式的下拉上拉
webview模式的下拉及上拉,真机运行Hello mui示例也是可以预览。另外结合webview模式选项卡切换,分别在每个子窗口中配置相应的下拉或上拉,就可以实现。具体实现可以参考示例以及mui相应的文档。
关于示例
Hello mui项目中的示例,许多是可以直接搬过来用的。关于webview,建议可以阅读下相关的API。
另外,这里有一个朋友分享的新手示例,还有一篇粗糙的示例文章。
参考上述一系列资料,希望可以帮助到你。
OKOK (作者)
代码放在下面了。我去掉那个down的部分就可以滑动,加上就滑不了了
2016-08-17 12:50