网上很多教程,浏览器滚动条是可以,但是指定 scrollElem 就不行了,后来发现,是个“回”字布局,最外面的一层,固定高度或响应剩余高度满屏。里面一层,正常文档流就行了。
这东西既然这么好用,我就测试好了,做个笔记。
样式表部分,本例用的是,自适应占满剩余高度
body,html{
height: 100%;
margin: 0;
}
#loadwrap{
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.container > div:last-child {
position: relative;
background-color: tomato;
flex: 1;
overflow-y: auto;
/*clear: both;*/
}
html代码部分
<div class="container">
<div>布局一</div>
<div class="layui-row" id="scrollBox" style="margin-bottom: 50px;">
<div class="flow-default" id="layflow"><!--流式区--></div>
</div>
</div>
js脚本部分
layui.use('flow', function()
{
var flow = layui.flow;
$('#layflow').unbind();
$('#layflow').remove();
$('#scrollBox').append('<div class="flow-default" id="layflow"></div>');
var flowlist=flow.load(
{
elem: '#layflow' //流加载容器,回字型内圈
,scrollElem: '#scrollBox' //滚动条所在容器,回字型外圈
,isAuto: true //为true时滚动翻页
,isLazyimg: true //图片懒加载
,mb:10 //滚动到底部的触发下一页距离,默认50
,end:'<div style="display:block;">no more</div>' //没有更多了
,done: function(page, next)
{
//执行下一页的回调
$.ajax(
{
url:"getdata.php",
type:'post',
dataType:'text',
async:false,
data:
{
page:page //页码
,pagesize:8 //每页量
},
beforeSend:function ()
{
},
success:function(json)
{
var lis = [];
if(json.RecordCount>0)
{
var obj=json.datalist;
if (obj.length > 0)
{
$.each(obj, function (index, item)
{
var html='<div>...你的内容...'+item.mycontent+'</div>';
lis.push(html);
});
}
}else
{
//无数据
}
next(lis.join(''), page < json.pages);
},
complete: function ()
{
},
});
//以上是网络数据插入
} //done end
}); //flow end
});
通俗易懂。