view.js
2.01 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
/*
* @Author: Targaryen
* @Date: 2017-04-26 17:15:50
* @Last Modified by: Targaryen
* @Last Modified time: 2017-05-02 14:43:23
*/
'use strict';
import {View} from 'yoho-mvc';
class ListView extends View {
constructor() {
super('#guangList');
this.list = $('#info-list');
this.nav = this.$base.find('#guang-nav');
this.navItem = this.nav.find('.guang-nav-item');
this.beforeScroll = document.body.scrollTop; // 滚动前位置记录
this.on('touchend touchcancel', 'li', this.tabClick.bind(this));
$(window).scroll(() => {
window.requestAnimationFrame(this.scrollToLoadMore.bind(this));
});
}
/**
* Tab 切换
* @param {*} e
*/
tabClick(e) {
this.beforeScroll = document.body.scrollTop; // 滚动前位置记录
let $this = $(e.currentTarget);
this.navItem.removeClass('focus');
$this.addClass('focus');
this.emit('tabchange', $this.data('type'));
}
/**
* 列表改变
* @param {*} html
*/
listChange(html) {
this.list.html(html);
}
/**
* 列表追加
* @param {*} html
*/
listAppend(html) {
this.list.append(html);
}
/**
* 获取默认 Type
*/
getType() {
return this.navItem.find('li.focus').data('type');
}
/**
* 滚动加载更多
*/
scrollHandler() {
if ($(window).scrollTop() > this.list.height() * 0.5) {
let type = this.getType();
this.emit('loadmore', type);
}
}
/**
* 滚动控制
*/
scrollToLoadMore() {
setTimeout(() => {
let afterScroll = document.body.scrollTop;
if (afterScroll - this.beforeScroll > 0) {
window.requestAnimationFrame(this.scrollHandler.bind(this));
this.beforeScroll = afterScroll;
} else {
return false;
}
}, 5);
}
}
module.exports = {
ListView
};