family-coinMall.page.js
3.56 KB
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import 'home/family-coinMall.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import tip from 'plugin/tip';
import tabRender from 'home/coin-get-list.hbs';
import lazyLoad from 'yoho-jquery-lazyload';
class IconMall extends Page {
constructor() {
super();
this.selector = {
$tabItem: $('.tab .tab-item'),
$defaultTabItem: $('.tab .tab-item:first'),
$coinMallC: $('.coin-mall-c'),
$tabFixed: $('.tab-fixed'),
$yohonowTab: $('#yohonow-tab'),
$marsTab: $('#mars-tab')
};
this.view = {
tabRender
};
this.page = 1;
this.limit = 10;
this.type = 'now';
this.loading = false;
this.end = false;
this.fixTop = this.selector.$tabFixed.offset().top;
this.init();
}
init() {
this.bindEvents();
this.defaultChosen();
this.scroll();
this.getList();
}
scrollHandler() {
if (($(window).scrollTop() + $(window).height() >= $(document).height() * 0.8)) {
this.doMore();
}
}
doMore() {
if (!this.end && !this.loading) {
this.page++;
this.getList();
}
}
getList() {
this.loading = true;
this.ajax({
url: '/home/family/coinMall/getList',
data: {
type: this.type,
page: this.page
}
}).then(result => {
if (result && result.list.length > 0) {
let $result = $(this.view.tabRender(result));
if (this.type === 'now') {
this.selector.$yohonowTab.append($result);
}
if (this.type === 'mars') {
this.selector.$marsTab.append($result);
}
this.loading = false;
lazyLoad($result.find('img.lazy'));
} else {
this.end = true;
tip.show('没有更多数据了～～～');
}
}).catch(error => {
console.error(error);
});
}
scroll() {
$(window).scroll(() => {
let $scrollTop = $(window).scrollTop();
if ($scrollTop >= this.fixTop) {
this.selector.$tabFixed.find('.tab').addClass('fixed');
} else {
this.selector.$tabFixed.find('.tab').removeClass('fixed');
}
$(window).scroll(() => {
window.requestAnimationFrame(this.scrollHandler.bind(this));
});
});
}
bindEvents() {
this.selector.$tabItem.on('click', this.tabItem.bind(this));
}
defaultChosen() {
let defaultId = this.selector.$defaultTabItem.attr('id');
this.selector.$defaultTabItem.addClass('active');
this.selector.$coinMallC.attr('id', defaultId);
}
tabItem(e) {
let $this = $(e.currentTarget);
let $thisId = $this.attr('id');
this.selector.$yohonowTab.empty();
this.selector.$marsTab.empty();
$(`#${$thisId}-tab`).show().siblings('.tab-item-c').hide();
this.selector.$coinMallC.removeAttr('id');
this.selector.$coinMallC.attr('id', $thisId);
$this.addClass('active').siblings('div').removeClass('active');
if ($this.attr('id') === 'yohonow') {
this.type = 'now';
}
if ($this.attr('id') === 'mars') {
this.type = 'mars';
}
this.page = 1;
this.getList();
}
}
$(() => {
new IconMall();
});