Authored by xuqi

下拉加载请求数据实现

@@ -16,6 +16,8 @@ require('lazyload'); @@ -16,6 +16,8 @@ require('lazyload');
16 exports.init = function() { 16 exports.init = function() {
17 $(function() { 17 $(function() {
18 var $intro = $('#intro'), 18 var $intro = $('#intro'),
  19 + $infoContent = $('#info-content'),
  20 + dataEnd = false,
19 tpl; 21 tpl;
20 22
21 //获取相关资讯模板 23 //获取相关资讯模板
@@ -54,6 +56,44 @@ exports.init = function() { @@ -54,6 +56,44 @@ exports.init = function() {
54 }); 56 });
55 57
56 //下拉加载更多 58 //下拉加载更多
  59 + $(window).scroll(function() {
  60 + var count;
  61 + if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
  62 + //loadData
  63 + if (dataEnd) {
  64 + //下次下拉时不显示加载图片以及不加载数据
  65 + } else {
  66 + count = $infoContent.children('.info-block').length;
  67 + $.ajax({
  68 + type: 'GET',
  69 + url: '/ps/loadInfo',
  70 + data: {
  71 + start: count
  72 + }
  73 + }).then(function(data) {
  74 + var html = '',
  75 + res,
  76 + i;
  77 + if (data.success) {
  78 + if (data.end) {
  79 + dataEnd = true;
  80 + }
  81 + res = data.data;
  82 + for (i = 0; i < res.length; i++) {
  83 + html += Mustache.render(tpl, res[i]);
  84 + }
  85 + if (html !== '') {
  86 + $infoContent.append(html);
57 87
  88 + //lazyload 不包含src即未加载的图片
  89 + $('img.lazy:not([src])').lazyload({
  90 + container: $infoContent
  91 + });
  92 + }
  93 + }
  94 + });
  95 + }
  96 + }
  97 + });
58 }); 98 });
59 }; 99 };
@@ -15,4 +15,5 @@ module.exports = function(app) { @@ -15,4 +15,5 @@ module.exports = function(app) {
15 15
16 app.get('/ps', ps.show); //plus + star 16 app.get('/ps', ps.show); //plus + star
17 app.get('/ps/readTpl', ps.readTpl); //获取相关资讯模板 17 app.get('/ps/readTpl', ps.readTpl); //获取相关资讯模板
  18 + app.get('/ps/loadInfo', ps.loadInfo); //加载相关资讯数据
18 }; 19 };
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 * @date: 2015/4/15 4 * @date: 2015/4/15
5 */ 5 */
6 var data = require('../../public/js/data')('ps'), 6 var data = require('../../public/js/data')('ps'),
  7 + dataInfos = require('../../public/js/data')('dataInfo'),
7 path = require('path'), 8 path = require('path'),
8 fs = require('fs'), 9 fs = require('fs'),
9 tplPath = path.normalize(path.join(__dirname, '../partials/ps/info-item.html')); 10 tplPath = path.normalize(path.join(__dirname, '../partials/ps/info-item.html'));
@@ -20,11 +21,34 @@ exports.show = function(req, res) { @@ -20,11 +21,34 @@ exports.show = function(req, res) {
20 exports.readTpl = function(req, res) { 21 exports.readTpl = function(req, res) {
21 fs.readFile(tplPath, 'utf8', function(err, data) { 22 fs.readFile(tplPath, 'utf8', function(err, data) {
22 if (err) { 23 if (err) {
23 - res.send({success: false}) 24 + res.send({success: false});
24 } 25 }
  26 +
  27 + fs.readFile(
  28 + path.normalize(path.join(__dirname, '../partials/common/time-view-like-share.html')),
  29 + 'utf8', function(err, subData) {
  30 + if (err) {
  31 + res.send({success: false});
  32 + }
  33 + data = data.replace('{{> common/time_view_like_share}}', subData); //Note: 后端需将partials目录替换为内容
25 res.send({ 34 res.send({
26 success: true, 35 success: true,
27 data: data 36 data: data
28 }); 37 });
29 }); 38 });
  39 + });
30 }; 40 };
  41 +
  42 +exports.loadInfo = function(req, res) {
  43 + var start = 1 * req.query.start,
  44 + count = 3,
  45 + end = false;
  46 + if (start + count >= dataInfos.length) {
  47 + end = true;
  48 + }
  49 + res.send({
  50 + success: true,
  51 + end: end,
  52 + data: dataInfos.slice(start, start + count)
  53 + });
  54 +}
@@ -42,7 +42,7 @@ @@ -42,7 +42,7 @@
42 <div class="info-title-container"> 42 <div class="info-title-container">
43 <h2 class="info-title">相关文章</div> 43 <h2 class="info-title">相关文章</div>
44 </div> 44 </div>
45 - <div class="info-content"> 45 + <div id="info-content" class="info-content">
46 {{# info}} 46 {{# info}}
47 {{> ps/info_item}} 47 {{> ps/info_item}}
48 {{/ info}} 48 {{/ info}}