js实现下拉分页加载更多

avatar 2018年01月11日14:37:49 6 3224 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
比如要实现一个媒体图片下拉加载更多的功能

主要看JS代码
  1. var winH = $(window).height(); //页面可视区域高度
  2. var i = 1;
  3. var max = ${attachments.pages};//总页数
  4. $(window).scroll(function () {
  5.     var pageH = $(document.body).height();
  6.     var scrollT = $(window).scrollTop(); //滚动条top
  7.     var aa = (pageH - winH - scrollT) / winH;
  8.     if (aa < 0.02 && i < max) {
  9.         i++;
  10.         $("#pageNum").html(i);
  11.         var keywords = $('#keywords').val();
  12.         $.ajax({
  13.             type: 'GET',
  14.             url: '/admin/attachments/ajax?page=' + i + '&keywords=' + keywords,
  15.             success: function (data) {
  16.                 if (data.code == 1) {
  17.                     console.log(data);
  18.                     var str = '';
  19.                     $.each(data.result, function (index, value) {
  20.                         str += '<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"\n' +
  21.                                 '     onclick="openDetail(' + value.attachId + ')">\n' +
  22.                                 '     <a href="#" class="thumbnail">\n' +
  23.                                 '         <img src="' + value.attachSmallPath + '" class="img-responsive"\n' +
  24.                                 '          title="' + value.attachName + '">\n' +
  25.                                 '     </a>\n' +
  26.                                 '</div>';
  27.                     });
  28.                     console.log(str);
  29.                     $("#attachment-box").append(str);
  30.                 } else {
  31.                     showMsg(data.msg, "error", 1000);
  32.                 }
  33.             }
  34.         })
  35.     }
  36. });

后台代码
  1. @GetMapping(value = "/ajax", produces = {"application/json;charset=UTF-8"})
  2.    @ResponseBody
  3.    public JsonResult listAttachmentByAjax(@RequestParam(value = "keywords", required = false) String keywords,
  4.                                           @RequestParam(value = "page", defaultValue = "1") Integer page,
  5.                                           @RequestParam(value = "size", defaultValue = "18") Integer size) {
  6.        HashMap<String, Object> criteria = new HashMap<>();
  7.        if (!Strings.isNullOrEmpty(keywords)) {
  8.            criteria.put("keywords", keywords);
  9.        }
  10.        Page pageable = new Page(page, size);
  11.        Page<Attachment> attachments;
  12.        try {
  13.            attachments = attachmentService.findAllAttachments(criteria, pageable);
  14.        } catch (Exception e) {
  15.            log.error("附件获取失败：{}", e.getMessage());
  16.            return new JsonResult(ResultCodeEnum.FAIL.getCode(), localeMessageUtil.getMessage("code.admin.common.query-failed"));
  17.        }
  18.        return new JsonResult(ResultCodeEnum.SUCCESS.getCode(), localeMessageUtil.getMessage("code.admin.common.query-success"), attachments.getRecords());
  19.    }



效果如下

历史上的今天
一月
11日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0