电话
13363039260
瀑布流滚动加载
2024-01-26 10:15 小编
滚动加载原理是当页面向下滚动时自动加载下一页数据并填充到当前页面，实现无刷新加载。
一、用于栏目列表
1、创建目标list_data.html专门用来写栏目分页循环标签的目标文件
{module catid=$catid order=updatetime page=1}
<div class="article-list>
<a href="{$t.url}">
{$t.title}
</a>
</div>
{/module}
2、在list.html中标记显示容器div
<div class="article_info" id="content_list">
{template "list_data.html"}
</div>
默认加载了第一页数据
3、在页面底部写加载的js
var Mpage=1;
//滚动显示更多
var scroll_get = true; //做个标志,不要反反复复的加载
$(document).ready(function () {
$(window).scroll(function () {
if (scroll_get==true && (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
scroll_get = false;
layer.msg('内容加截中,请稍候',{time:1000});
dr_ajax_load_more();
}
});
});
function dr_ajax_load_more(){
Mpage++;
$.get('/index.php?s=api&c=api&m=template&name=list_data.html&module={MOD_DIR}&catid={$catid}&format=json&page='+Mpage+'&'+Math.random(),function(res){
$('.footer-cont').hide();
if(res.code==1){
if(res.msg==''){
//这里的判断条件需要结合list_data.html模板来写，否则会出现无限的加载了
layer.msg("已经显示完了",{time:500});
}else{
$('#content_list').append(res.msg);
scroll_get = true;
}
}else{
layer.msg(res.msg,{time:2500});
}
}, 'json');
}
#content_list就是（2）中的容器ID
二、用于搜索页面
1、创建目标search_data.html专门用来写搜索分页循环标签的目标文件
{search module=MOD_DIR id=$searchid total=$sototal order=$params.order catid=$catid page=1 pagesize=10 urlrule=$urlrule}
<div class="article-list>
<a href="{$t.url}">
{$t.title}
</a>
</div>
{/search}
2、在search.html中标记显示容器div
<div class="article_info" id="content_list">
{template "search_data.html"}
</div>
默认加载了第一页数据
加载按钮
<div class="ajax_btn margin-top-20" id="is_ajax_btn"> <a href="javascript:dr_ajax_load_more();" class="btn default btn-block"> 加载更多 </a> </div>
3、在页面底部写加载的js
var Mpage=1;
//滚动显示更多
var scroll_get = true; //做个标志,不要反反复复的加载
$(document).ready(function () {
$(window).scroll(function () {
if (scroll_get==true && (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
scroll_get = false;
layer.msg('内容加截中,请稍候',{time:1000});
dr_ajax_load_more();
}
});
});
function dr_ajax_load_more(){
Mpage++;
$.get('/index.php?s=api&c=api&m=template&name=search_data.html&module={MOD_DIR}&catid={$catid}&searchid={$searchid}&sototal={$sototal}&order={$params.order}&format=json&page='+Mpage+'&'+Math.random(),function(res){
$('.footer-cont').hide();
if(res.code==1){
if(res.msg==''){
//这里的判断条件需要结合list_data.html模板来写，否则会出现无限的加载了
$('#is_ajax_btn').hide();
layer.msg("已经显示完了",{time:500});
}else{
$('#content_list').append(res.msg);
scroll_get = true;
}
}else{
layer.msg(res.msg,{time:2500});
}
}, 'json');
}
#content_list就是（2）中的容器ID
三、用于主站首页
1、创建目标index_data.html专门用来写搜索分页循环标签的目标文件
{module module=news page=1 pagesize=10 urlrule=index.php}
<div class="article-list>
<a href="{$t.url}">
{$t.title}
</a>
</div>
{/module}
主站时需要指定module=具体模块目录
2、在index.html中标记显示容器div
<div class="article_info" id="content_list">
{template "index_data.html"}
</div>
默认加载了第一页数据
3、在页面底部写加载的js
var Mpage=1;
//滚动显示更多
var scroll_get = true; //做个标志,不要反反复复的加载
$(document).ready(function () {
$(window).scroll(function () {
if (scroll_get==true && (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
scroll_get = false;
layer.msg('内容加截中,请稍候',{time:1000});
dr_ajax_load_more();
}
});
});
function dr_ajax_load_more(){
Mpage++;
$.get('/index.php?s=api&c=api&m=template&name=index_data.html&format=json&page='+Mpage+'&'+Math.random(),function(res){
$('.footer-cont').hide();
if(res.code==1){
if(res.msg==''){
//这里的判断条件需要结合list_data.html模板来写，否则会出现无限的加载了
layer.msg("已经显示完了",{time:500});
}else{
$('#content_list').append(res.msg);
scroll_get = true;
}
}else{
layer.msg(res.msg,{time:2500});
}
}, 'json');
}
#content_list就是（2）中的容器ID
四、用于模块首页
1、创建目标news/module_data.html专门用来写搜索分页循环标签的目标文件
{module module=MOD_DIR page=1 pagesize=10 urlrule=index.php}
<div class="article-list>
<a href="{$t.url}">
{$t.title}
</a>
</div>
{/module}
2、在news/index.html中标记显示容器div
<div class="article_info" id="content_list">
{template "module_data.html"}
</div>
默认加载了第一页数据
3、在页面底部写加载的js
var Mpage=1;
//滚动显示更多
var scroll_get = true; //做个标志,不要反反复复的加载
$(document).ready(function () {
$(window).scroll(function () {
if (scroll_get==true && (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
scroll_get = false;
layer.msg('内容加截中,请稍候',{time:1000});
dr_ajax_load_more();
}
});
});
function dr_ajax_load_more(){
Mpage++;
$.get('/index.php?s=api&c=api&m=template&name=module_data.html&module={MOD_DIR}&format=json&page='+Mpage+'&'+Math.random(),function(res){
$('.footer-cont').hide();
if(res.code==1){
if(res.msg==''){
//这里的判断条件需要结合list_data.html模板来写，否则会出现无限的加载了
layer.msg("已经显示完了",{time:500});
}else{
$('#content_list').append(res.msg);
scroll_get = true;
}
}else{
layer.msg(res.msg,{time:2500});
}
}, 'json');
}
#content_list就是（2）中的容器ID
------------
题外判断，判断某个div是否滚到底部
$(document).ready(function () {
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
var nDivHight = $(".Main").height();
$(".Main").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight) {
//到达底部了
}
});
});