无限滚动加载数据问题

问题描述

问 题

做移动端程序的时候，经常会遇到无限滚动的功能，通常实现无限滚动的方式是页面滚动到底部后出发一个ajax请求，后端返回数据然后动态追加DOM，但是如果DOM结构很复杂，追加的时候拼接HTML会很复杂，比如之前做过的一段程序，如下：

$.each(response.data, function(key, task){
                      var html =  '<div class="card facebook-card">';
                      html +=   '<div class="card-header no-border">';
                      html +=     '<div class="facebook-avatar">';
                      html +=       '<img src="' + task.user_avatar + '" />';
                      html +=     '</div>';
                      html +=     '<div class="facebook-name">';
                      html +=       '<span class="content-author">';
                      html +=         task.user_nickname;
                      html +=       '</span>';
                      html +=       '<span class="content-tag">';
                      html +=         task.category_name
                      html +=       '</span>';
                      html +=     '</div>';
                      html +=     '<div class="facebook-date">';
                      html +=       task.city
                      html +=     '</div>';
                      html +=   '</div>';
                      html +=   '<div class="card-content">';
                      html +=     '<a class="content-title" href="' + site_domain + '/home/task/detail_auth/task_id/' + task.id + '/type/' +type + '/category_id/' + category_id + '/city/' + city + '">';
                      html +=       task.title;
                      html +=     '</a>';
                      html +=     '<div class="content-detail">';
                      html +=       '<a class="content-title" href="' + site_domain + '/home/task/detail_auth/task_id/' + task.id + '/type/' + type + '/category_id/' + category_id + '/city/' + city + '">';
                      html +=         task.detail
                      html +=       '</a>';
                      html +=     '</div>';
                      html +=     '<div class="content-bottom">';
                      html +=       '<span class="content-date">';
                      html +=         '截止时间:' + task.deadline
                      html +=       '</span>';
                      if (task.openid == openid) {
                        html +=       '<span class="content-delete" data-id="task.id">';
                        html +=         '删除';
                        html +=       '</span>';
                      }
                      if (task.is_expired == 1) {
                        html +=       '<span class="content-expired">';
                        html +=         '已过期';
                        html +=       '</span>';
                      }
                      html +=     '</div>';
                      html +=   '</div>';//
                      html += '</div>';
                      html += '<div class="card-divider"></div>';
                      $('.task-container').append(html);
                    });

对于这种HTML结构封装的时候必须得非常小心，如果漏掉了某个标签，造成标签未闭合，很可能就造成整个页面样式错乱(自己都觉得这段代码太烂了)。
对于这种情况，大家有什么比较方便的方法么？

解决方案

见题主代码得知还停留在使用jQuery阶段，然后也看到比较多人建议使用框架，但是基于jQuery也能简单解决问题。

可以使用简单的模板处理underscore.template。
然后把模板写到页面上

<template id="task-item">
<ui>
    <li>
        <div class="avatar">
            <img src="<%- task.user_avatar %>" alt="<%- task.user_nickname %>">
            <br>
            <span><%- task.user_nickname %></span>
        </div>
        <div class="content">
            <%- task.detail %>
        </div>
    </li>
</ui>
</template>

下面是使用例子：

var template = _.template($('#task-item').html());
$.each(response.data, function(key, task){
   $('.task-container').append(template(task)); 
});

这样就能简单解决题主问题，但是从效率和维护角度，还是建议使用一些MVVM框架比较好，目前推荐react的比较多，小应用我推荐vue。

这篇关于无限滚动加载数据问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！