仿掘金项目首页文章列表下拉加载更多功能

前台

      <script type="text/javascript">
          var isNoMore = false;
          var iiLoading=null;
          var curr_req_id = 0;
          var g_sid = 0;
          function refresh(loadmore) {
              $(window).scroll(function(){
                  console.log('正在滑动f');

                  var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
                  var scrollHeight = $(document).height();   //当前页面的总高度
                  var clientHeight = $(this).height();    //当前可视的页面高度
                  // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
                  if(!isNoMore&&(scrollTop + clientHeight >= scrollHeight)){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
                      console.log('下拉');
                      if(loadmore){
                          var last_id = $('#topic-list li:last-child').attr('id');

                          loadmore(last_id);
                      }
                  }
              });
          }

          $(function () {

              refresh(function (last_id) {
                  if(last_id == undefined)
                  {
                      return;
                  }

                  if(curr_req_id == last_id)// 防止多次触发加载多次同一页数据
                  {
                      return;
                  }
                  curr_req_id = last_id;
                  iiLoading = layer.load();
                  $.post("${pageContext.request.contextPath}/topic/getpagedtopics",{section_id:g_sid,last_topic_id:last_id}, function (res) {
                      // layer.msg(ret.msg);
                      var data = JSON.parse(res);

                      var html = template('topic-list-tpl', data);
                      $('#topic-list').append(html);
                      layer.close(iiLoading);
                      if(data.list.length == 0)
                      {
                          isNoMore = true;
                          layer.msg('没有了', {
                              time: 500
                          });
                      }
                      curr_req_id = 0;
                  });
              });
              getTopicsBySectionID(g_sid);

          })

          function getTopicsBySectionID(sid) {
              g_sid = sid;
              $.post("${pageContext.request.contextPath}/topic/getpagedtopics",{section_id:sid,last_topic_id:0}, function (res) {
                  var data = JSON.parse(res);
                  var html = template('topic-list-tpl', data);
                  $('#topic-list').html('');
                  $('#topic-list').append(html);
              });
          }

      </script>

其中，使用到layer组件layer弹窗

后台功能：TopicPageInfoScroll

public class TopicPageInfoScroll {
    private int section_id;
    private int last_topic_id;

    public int getLast_topic_id() {
        return last_topic_id;
    }

    public void setLast_topic_id(int last_topic_id) {
        this.last_topic_id = last_topic_id;
    }

    public int getSection_id() {
        return section_id;
    }

    public void setSection_id(int section_id) {
        this.section_id = section_id;
    }
}

Controller

    @RequestMapping("getpagedtopics")
    public void getPagedTopics(TopicPageInfoScroll topicPageInfoScroll
            ,HttpServletResponse response) throws IOException, InterruptedException {
//        int count = topicService.getTopicsCounts(pageinfo);
        List<TopicInfoEx> lstBookInfos = topicService.getPagedTopics(topicPageInfoScroll);

        PageData<TopicInfoEx> pageData = new PageData<TopicInfoEx>();
        pageData.setList(lstBookInfos);
        pageData.setTotal(0);

        response.setContentType("text/html;charset=utf-8");
        String strJsonString = JSON.toJSONString(pageData);
        PrintWriter pWriter = response.getWriter();
        Thread.sleep(500);//模拟加载速度较慢
        pWriter.println(strJsonString);

Mapper

 <select id="getPagedTopicsScroll" parameterType="TopicPageInfoScroll" resultType="TopicInfoEx">
        <include refid="query_topics"/>
        <where>
            <if test="last_topic_id!=0">
                topic_info.topic_id &lt; #{last_topic_id}
            </if>

            <if test="section_id!=0">
                and topic_info.section_id = #{section_id}
            </if>
        </where>
        ORDER BY topic_id DESC
        limit 0,20
    </select>