由于,不管是在PC端,还是在移动端,上拉加载更多这个功能可以说是少不了的,尤其是在移动端。
在写这个上拉加载更多这个功能之前,我也用过一些比如 iscroll.js之类的等等插件。 但是,在使用过程中发现一系列问题。比如:首先至少得引入相应的css文件和JS文件吧,其次在你使用时必须按照它规定的格式去写,不然就不行。还有在1个页面中有多个上拉加载更多功能, 想改样式也很不方便等等。
根据布局,给window, 或者某个DIV元素加个scroll事件。当用户上滑时,判断滚动条的位置是否到达底部,如果到达底部,则执行加载下一页方法。
在 在写的过程中发现一个问题,就是判断滚动条的位置是否到达底部时 不能用等于 == (因为滚动条在滚动时不一定会刚对等于底部的位置), 所以用 >= 大于或等于,可是 >=会使上拉加载方法执行很多次,从而导致一下子加载很多页的问题,如果你所加载的数据时有编号顺序的,那么会使编号顺序混乱,比如先加载第3页,再加载第2页(第1页没问题)等等。
在JS代码中 分别以滚动加载方法1 和 滚动加载方法2 列出了对应的解决办法。
思路1:当滚动条的位置到达底部时,再用一个判断来决定是否加载数据,其是就是一个开关,这个开关默认是false, 只有当数据加载完成时,才设为true。
思路2:当滚动条的位置到达底部时,延时执行加载数据方法(并在延时执行之前,先清空之前的定时器)。
1、在JS代码中已经有非常详细的注释和说明。
2、该功能(上拉加载更多)除jquery以外,没有使用基他任何插件。
<header id="header">首 页</header>
<section id="main">
<ul id="list_box"></ul>
</section>
<footer id="footer">
<div class="active">首页</div>
<div>商城</div>
<div>其他</div>
<div>我的</div>
</footer>
css
* {
margin:0px;
padding:0px;
}
#header {
position:fixed;
top:0px;
left:0px;
width:100%;
height:50px;
background:#FAA732;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
}
#main {
position:absolute;
top:50px;
left:0px;
right:0px;
bottom:51px;
padding:10px;
overflow:auto;
}
#main li {
display:flex;
margin-bottom:10px;
padding:10px;
border-bottom:1px solid gray;
border-radius:4px;
background:#EEE;
}
#main li img {
flex:50px 0 0;
width:50px;
height:50px;
padding:4px;
border:1px solid green;
}
#main li span {
padding-left:4px;
line-height:24px;
}
#footer {
display:flex;
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:50px;
border-top:1px solid gray;
background:#FAA732;
}
#footer div {
flex:1;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
border-right:1px solid white;
}
#footer div:nth-child(4) {
border:none;
}
#footer .active {
background:#0086FF;
}
Js
var page = 1, //分页码
off_on = false, //分页开关(滚动加载方法 1 中用的)
timers = null; //定时器(滚动加载方法 2 中用的)
//加载数据
var LoadingDataFn = function() {
var dom = '';
for (var i = 0; i < 20; i++) {
dom += '<li><img src="http://b-ssl.duitang.com/uploads/item/201409/12/20140912132553_5Wcx3.jpeg"/><span>上滑列加载表内容上滑列加载表内容上滑列加载表内容上滑列加载表内容</span></li>';
}
$('#list_box').append(dom);
off_on = true; //[重要]这是使用了 {滚动加载方法1} 时 用到的 !!![如果用 滚动加载方法1 时:off_on 在这里不设 true的话, 下次就没法加载了哦!]
};
//初始化, 第一次加载
$(document).ready(function() {
LoadingDataFn();
});
//底部切换
$(document.body).on('click', '#footer div', function() {
$(this).addClass('active').siblings().removeClass('active');
});
//滚动加载方法1
$('#main').scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
//这里用 [ off_on ] 来控制是否加载 (这样就解决了 当上页的条件满足时,一下子加载多次的问题啦)
if (off_on) {
//off_on = false;
//page++;
//console.log("第"+page+"页");
//LoadingDataFn(); //调用执行上面的加载方法
}
}
});
//滚动加载方法2
$('#main').scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
clearTimeout(timers);
//这里还可以用 [ 延时执行 ] 来控制是否加载 (这样就解决了 当上页的条件满足时,一下子加载多次的问题啦)
timers = setTimeout(function() {
page++;
console.log("第" + page + "页");
LoadingDataFn(); //调用执行上面的加载方法
}, 300);
}
});
//还可以基window窗口(body)来添加滚动事件, (因为布局不同,所以在这里没效果,因为[上面是基于body中的某个元素来添加滚动事的])
$(window).scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
clearTimeout(timers);
timers = setTimeout(function() {
page++;
console.log("第" + page + "页");
LoadingDataFn();
}, 300);
}
});
在ios中为了让滑动更流畅,不那么生涩,我们需要使用-webkit-overflow-scrolling属性,但是在safari、微信等浏览器中会出现下拉回弹和上拉空白的效果,解决办法为:当滚动区滚到顶部时,手再触屏时,把把div的滚动位置向下调一点点
vux是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUi的基础上定制需要的样式
原生js实现上拉加载其实超级简单,把原理整明白了你也会,再也不用去引一个mescroll啦~好了,废话不多说,开始进入正题:上拉加载是怎么去做的,原理就是监听滚动条滑到页面底部,然后就去做一次请求数据
使用过很多下拉刷新,上拉加载的插件,虽然也知道一点原理,但似乎一直不太完全能理解它,闲来无事,手写一个,感受下,借鉴了better-scroll的源码,功能当然相差甚远,也只是个简易版的实现,大概就这意思。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!