|
|
|
const cacheStore = require('./cache-store');
|
|
|
|
|
|
|
|
class ProductListLoader {
|
|
|
|
constructor(params, url, extra) {
|
|
|
|
this.scrollActived = extra && typeof extra.scrollActived !== 'undefined' ?
|
|
|
|
extra.scrollActived : true; // 是否激活滚动加载，默认激活
|
|
|
|
this.params = params;
|
|
|
|
this.view = {
|
|
|
|
goodsContainer: $('#goodsContainer'),
|
|
|
|
container: $('#goodsContainer').children('.goods-list')
|
|
|
|
};
|
|
|
|
|
|
|
|
// this.url = location.protocol + '//m.yohobuy.com/' + url;
|
|
|
|
this.url = url;
|
|
|
|
this.beforeScroll = document.body.scrollTop; // 滚动前位置记录
|
|
|
|
this.defaultOpt = Object.assign({}, this.params); // 默认参数
|
|
|
|
this.isScrollLoad = false; // 是否是滚动加载
|
|
|
|
this.page = params.page || 1;
|
|
|
|
this.isLoadMore = true; // 是否继续请求数据
|
|
|
|
let self = this;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 滚动加载
|
|
|
|
*/
|
|
|
|
window.onscroll = function() {
|
|
|
|
if (self.scrollActived) {
|
|
|
|
setTimeout(function() {
|
|
|
|
let afterScroll = window.scrollY;
|
|
|
|
|
|
|
|
if (afterScroll - self.beforeScroll > 0) {
|
|
|
|
window.requestAnimationFrame(() => {
|
|
|
|
self.scrollHandler();
|
|
|
|
});
|
|
|
|
self.beforeScroll = afterScroll;
|
|
|
|
} else {
|
|
|
|
self.beforeScroll = afterScroll;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}, 5);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 当scroll到1/2$goodsContainer高度后继续请求下一页数据
|
|
|
|
*/
|
|
|
|
scrollHandler() {
|
|
|
|
let goodsContainerHeight = this.view.container.height();
|
|
|
|
|
|
|
|
if ($(window).scrollTop() > goodsContainerHeight * 0.6) {
|
|
|
|
this.isScrollLoad = true;
|
|
|
|
this.getGoodsList();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
dataRender(result) {
|
|
|
|
|
|
|
|
// 去掉正在加载
|
|
|
|
$('.search-divide').remove();
|
|
|
|
|
|
|
|
let noResult = !result || !result.length ||
|
|
|
|
result.length < 1 ||
|
|
|
|
(result.list && result.list.length < 1);
|
|
|
|
|
|
|
|
// 没有结果输出没有结果页面
|
|
|
|
if (noResult) {
|
|
|
|
if (this.isScrollLoad) {
|
|
|
|
this.view.container.after(() => {
|
|
|
|
return '<div class="search-divide">没有更多内容了...</div>';
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.view.container.html('<div>未查询到数据！</div>');
|
|
|
|
}
|
|
|
|
this.isLoadMore = false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.isScrollLoad) {
|
|
|
|
this.view.container.append(result);
|
|
|
|
} else {
|
|
|
|
this.view.container.html(result);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 获取商品列表
|
|
|
|
*/
|
|
|
|
getGoodsList(params) {
|
|
|
|
Object.assign(this.defaultOpt, {
|
|
|
|
page: this.page++
|
|
|
|
});
|
|
|
|
|
|
|
|
// 有参数，参数优先，滚动加载相关参数重置
|
|
|
|
|
|
|
|
if (params) {
|
|
|
|
Object.assign(this.defaultOpt, params);
|
|
|
|
if (params.page) {
|
|
|
|
this.page = params.page + 1;
|
|
|
|
}
|
|
|
|
this.isScrollLoad = false;
|
|
|
|
this.beforeScroll = document.body.scrollTop;
|
|
|
|
}
|
|
|
|
let catchKey = this.url + '?' + $.param(this.defaultOpt);
|
|
|
|
|
|
|
|
if (!this.isLoadMore) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: this.url,
|
|
|
|
data: this.defaultOpt,
|
|
|
|
xhrFields: {
|
|
|
|
withCredentials: true
|
|
|
|
},
|
|
|
|
beforeSend: () => {
|
|
|
|
let cacheData = cacheStore.get(catchKey);
|
|
|
|
|
|
|
|
if (cacheData) {
|
|
|
|
this.dataRender(cacheData);
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($('.search-divide').length > 0) {
|
|
|
|
$('.search-divide').remove();
|
|
|
|
}
|
|
|
|
|
|
|
|
this.view.container.after(() => {
|
|
|
|
return '<div class="search-divide">正在加载...</div>';
|
|
|
|
});
|
|
|
|
},
|
|
|
|
success: (result) => {
|
|
|
|
this.dataRender(result);
|
|
|
|
|
|
|
|
if (result && result.length) {
|
|
|
|
cacheStore.set(catchKey, result);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
error: () => {
|
|
|
|
let $divide = $('.search-divide');
|
|
|
|
|
|
|
|
$divide.text('加载失败，点击重试');
|
|
|
|
$divide.one('click', () => {
|
|
|
|
$divide.text('正在加载...');
|
|
|
|
this.getGoodsList();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = ProductListLoader; |
...
|
...
|
|
