滚动到底自动加载 底部滚动加载 完整代码HTML

（最后更新于2022-05-16） 分类: 技术文档 评论(0) 阅读(77237) 赞(0)

为了用户体验更好，当页面内容过多的时候我们一般会选择分页或者滚动到底部的时候进行加载下一页内容，这样前端用户则会得到更好的体验，而今天我把自己用的前端滑动到底部自动加载下一页内容分享出来给需要的朋友；这里分享的HTML代理使用了layui的模板引擎；

话不多说直接上代码：

底部无限加载代码实例
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<script id="testTpl" type="text/html">
{{# for(var i = 0; i < d.length; i++){ }}
<div class="col-12 col-md-6">
<div class="card mb-3">
<div class="clearfix card-body p-3 border-bottom">
<div class="pull-left"><h5 class="mb-0">
{{ d[i].account }}
{{#  if(d[i].pay_status != 1){ }}<span class="ml-1 badge badge-pill badge-warning">未支付</span>
{{#  } else { }}
{{#  if(d[i].cz_status === 1){ }}
<span class="ml-1 badge badge-pill badge-success">成功</span>
{{#  } else { }}
<span class="ml-1 badge badge-pill badge-primary">充值中</span>
{{#  } }}
{{#  } }}
</h5></div>
<div class="pull-right"><p class="text-muted mb-0">{{ layui.util.toDateString(d[i].create_time*1000, "yyyy-MM-dd HH:mm:ss") }}</p></div>
</div>
</div>
</div>
{{# } }}
</script>
<script>
//此模板是 用户充值话费或者电费的充值记录 后端直接用的thinkphp的分页返回数据
layui.use(['laytpl','element','flow'], function(){
let start = 0
    let pagesize=15;
    let flag=true
    let loading=false
    var element = layui.element,flow = layui.flow,laytpl = layui.laytpl;
    var number = "{:input('number')}",tp={$tp},mid={$mid},page=1;
   getData();
function getData(page=1){
   $.ajax({
    url: "{:cmf_plugin_url('Ying://Index/blog.21863.cn')}?number={:input('number')}&mid={$mid}&tp={$tp}&page="+page,
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    timeout : 15000,
    success: function(res, textStatus, xhr) {
     loading = false;
     if (res.data.length>0) {
       var gettpl = document.getElementById('testTpl').innerHTML;
       laytpl(gettpl).render(res.data, function (html) {
       $("#volist").append(html);
       });
        $('#loading').hide();
    }else{
     flag=false
     $('#loading').html('没有更多数据了');
    }
    },
    beforeSend:function(){
            $("#loading").show();
        },
    error: function(xmlHttpRequest, textStatus, errorThrown) {
      console.log(errorThrown.toString());
    }
});
}
   $(window).scroll(function(){
   let pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
    let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
    let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if(pageHeight - viewportHeight - scrollHeight < 50){
     console.log(loading)
     if(loading) return;
     loading = true;
     if(flag){
     page++;
     getData(page);
        }
    }
});
});
</script>

自我使用效果还是可以的，不会出现多次加载或者一次加载多个、或者滚动到底部一直加载查询数据库的情况！如您看到此文，代码有需要改正的地方请留言指正谢谢！

除特别注明外，本站所有文章均为电信物联卡官网原创，转载请注明出处来自http://blog.21863.cn/post/1049.html

赞一下 打赏 生成封面
滚动到底自动加载 底部滚动加载 完整代码HTML bigger封面
  • 0 个人已赞
上一篇

下一篇

相关文章

参与评论