fe / mars-static · Commits

Go to a project

Authored by 李靖
Commit d56be3bdf3c32cc31d25c61132181ea2d8815e25 1 parent e60b4d5a

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

Inline Side-by-side
Showing 6 changed files with 281 additions and 194 deletions
... ... @@ -37,193 +37,195 @@
<a class="list-item" href="#" target="_blank">北京</a>
<a class="list-item" href="#" target="_blank">北京</a>
</div>
<div class="shop-item">
<div class="shop-pic">
<img src="../../src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
<div id="list-container">
<div class="shop-item">
<div class="shop-pic">
<img src="../../src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../../src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title eps-1">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-originalc="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
</div>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../../src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title eps-1">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-originalc="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
<div class="shop-item">
<div class="shop-pic">
<img src="../..//src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
</div>
</div>
</div>
<div class="shop-item">
<div class="shop-pic">
<img src="../..//src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
</div>
</div>
<div class="shop-item">
<div class="shop-pic">
<img src="../..//src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
<div class="shop-item">
<div class="shop-pic">
<img src="../..//src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
</div>
</div>
</div>
<h1 class="h1-g">新鲜好去处，探索城市潮流，潮流火星APP下载|火星Mars</h1>
... ...
{
"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;
... ...