framework7框架中tab页面下拉刷新方案

最近在使用framework7框架开发web app,发现在tab页面中直接定义多个ptr-content会导致异常。最后绑定用户点击tab的事件,动态解绑/绑定ptr后解决。

在HTML中这样定义ptr,只需在tab-1(首屏)中设置ptr-content即可,用户切换tab时再去把ptr-content class赋值到对应的tab中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="tabs">
<div id="tab-1" class="page-content tab tab-active ptr-content">
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
......
</div>
<div id="tab-2" class="page-content tab">
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
......
</div>
<div id="tab-3" class="page-content tab">
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
......
</div>
....
</div>

JS代码这样设置,注意我这里由于兼容性原因没有把Dom7定义为$$,如果你定义了Dom7为$$,直接把Dom7改为$$即可。

另外特别注意的是当用户切换tab后,必须先调用一次ptr.done()来让当前的refreshing停止,否则在refreshing时切换会出现奇怪的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Dom7('#tab-1').on('ptr:refresh', function (e) {
//Do something
app.ptr.done();
});
Dom7('#tab-2').on('ptr:refresh', function (e) {
//Do something
app.ptr.done();
});
Dom7('#tab-3').on('ptr:refresh', function (e) {
//Do something
app.ptr.done();
});
Dom7('a[href="#tab-1"]').on('click', function (e) {
app.ptr.done();
app.ptr.destroy('.ptr-content');
Dom7('.ptr-content').removeClass("ptr-content");
Dom7('#tab-1').addClass("ptr-content");
app.ptr.create('#tab-1');
});
Dom7('a[href="#tab-2"]').on('click', function (e) {
app.ptr.done();
app.ptr.destroy('.ptr-content');
Dom7('.ptr-content').removeClass("ptr-content");
Dom7('#tab-2').addClass("ptr-content");
app.ptr.create('#tab-2');
});
Dom7('a[href="#tab-3"]').on('click', function (e) {
app.ptr.done();
app.ptr.destroy('.ptr-content');
Dom7('.ptr-content').removeClass("ptr-content");
Dom7('#tab-3').addClass("ptr-content");
app.ptr.create('#tab-3');
});

注意我这里没有考虑使用API切换tab的情况,如果使用API,还需要修改一下绑定的代码。