Authored by 李靖

店铺列表,商圈列表加载更多

... ... @@ -37,6 +37,7 @@
<a class="list-item" href="#" target="_blank">北京</a>
<a class="list-item" href="#" target="_blank">北京</a>
</div>
<div id="list-container">
<div class="shop-item">
<div class="shop-pic">
<img src="../../src/images/area/city-test.png" alt="alt" />
... ... @@ -226,6 +227,7 @@
</a>
</div>
</div>
</div>
<h1 class="h1-g">新鲜好去处,探索城市潮流,潮流火星APP下载|火星Mars</h1>
<a target="_blank" title="app下载" class="download" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yohobuy.mars"></a>
</div>
... ...
{
"name": "mars-static",
"private": true,
"version": "1.0.7",
"version": "1.0.8",
"description": "mars-static",
"main": "build.js",
"scripts": {
... ...
require('./common/area-common');
require('./area/more-area');
... ...
const $ = require('jquery');
const lazyload = require('../plugins/lazyload');
window.jQuery = $;
let moreObj = {
domInit: function () {
this.el = {
$listContainer: $('#list-container')
};
},
init: function () {
this.domInit();
this.page = 0;
this.loading = false;
this.end = false;
this.scroll();
},
scroll: function () {
$(window).scroll(() => {
if (($(window).scrollTop() + $(window).height() >= $(document).height() * 0.8)) {
this.doMore();
}
});
},
doMore: function () {
if (!this.loading && !this.end) {
this.page++;
this.getMore();
}
},
getMore: function () {
this.loading = true;
let ajaxData = {
page: this.page,
row: 10
};
if ($('#cityId').val()) {
Object.assign(ajaxData, {cityId: $('#cityId').val()});
}
$.ajax({
method: 'GET',
url: window.$ajaxPath,
data: ajaxData,
success: (result) => {
if ($(result).length > 0) {
let $result = $(result);
let $lazyImg = $result.find('img.lazy');
this.el.$listContainer.append($result);
lazyload($lazyImg, {
threshold: 1000,
q: 80
});
this.loading = false;
} else {
this.end = true;
}
}
});
}
};
$(
function () {
moreObj.init();
}
);
... ...
const $ = require('jquery');
const lazyload = require('../plugins/lazyload');
window.jQuery = $;
let moreObj = {
... ... @@ -29,17 +30,33 @@ let moreObj = {
},
getMore: function () {
this.loading = true;
let ajaxData = {
page: this.page,
row: 10
};
if ($('#businessAreaId').val()) {
Object.assign(ajaxData, {businessAreaId: $('#businessAreaId').val()});
}
if ($('#cityId').val()) {
Object.assign(ajaxData, {cityId: $('#cityId').val()});
}
if ($('#tagId').val()) {
Object.assign(ajaxData, {tagId: $('#tagId').val()});
}
$.ajax({
method: 'GET',
url: window.$ajaxPath,
data: {
page: this.page,
row: 10,
businessAreaId: 44
},
data: ajaxData,
success: (result) => {
if (result) {
this.el.$listContainer.append(result);
if ($(result).length > 0) {
let $result = $(result);
let $lazyImg = $result.find('img.lazy');
this.el.$listContainer.append($result);
lazyload($lazyImg, {
threshold: 1000,
q: 80
});
this.loading = false;
} else {
this.end = true;
... ...
... ... @@ -204,7 +204,7 @@
.down-list {
display: none;
position: absolute;
top: 86px;
top: 85px;
left: 0;
max-height: 665px;
width: 720px;
... ...