当前位置： 旋风说(旋风PHPer分享网)> 技术文章> 正文
效果图如下（pc站也是可以用的）：
第一步：页面首先要先读取五条数据，这样不至于页面一打开是空的：
$list = M('tableName')->limit ( 5)->select ();第二步：写一个ajax页面或者方法，用来承载无限加载的数据（以下使用tp，并且每次加载5条的方法，你也可以改一下）:
public function ajaxmore(){
$page = $_POST['page'];/*当前是第几页*/
$page_num = 5;/*每次读取5条*/
$limit_first = ($page-1)*$page_num;
$limit_end = $page_num;
$list =M('tableName')->limit ($limit_first,$limit_end)->select();
if(!empty($list)){
$ary = $list;
}else{
$ary = [];
}
echo json_encode($ary);
}第三步,页面引入jquery和iscroll.js，并且引入css来定位div，不然div乱跑咋办（这两个文件我会在文章末尾放百度云下载链接）：
<script type="text/javascript" src="__PUBLIC__/front/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/front/js/iscroll.js"></script>
<style type="text/css">
#wrapper {
width: 100%;
position: absolute;
left: 0;
top: 40px;
overflow: hidden;
z-index: 1;
/* 防止本机Windows上的触摸事件 */
-ms-touch-action: none;
/* 防止callout tap-hold和文本的选择 */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* 防止文本调整取向变化对web应用程序很有用 */
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
.pull-loading {
text-align: center;
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
</style>第四步：给需要拖动来加载数据的大div加一个id，id为wrapper
第五步: 给加载数据的div一个id，叫做scroller,注意，scroller的id必须放在wrapper的id里面
第四步第五步的图如下：
最后一步，使用ajax去调用上面写的方法：
<script type="text/javascript">
var myscroll = new iScroll("wrapper", {
onScrollMove: function () { //拉动时
//上拉加载
if (this.y < this.maxScrollY) {
$(".pull-loading").html("释放加载");
$(".pull-loading").addClass("loading");
} else {
$(".pull-loading").html("上拉加载");
$(".pull-loading").removeClass("loading");
}
},
onScrollEnd: function () { //拉动结束时
//上拉加载
if ($(".pull-loading").hasClass('loading')) {
$(".pull-loading").html("加载中...");
pullOnLoad();
}
}
});
//上拉加载函数,ajax
var num = 1;
function pullOnLoad() {
num++;
$.ajax({
type:'post',
url:"{:U('News/ajaxmore')}",
data:{page:num},
cache:false,
dataType:'JSON',
success:function(data){
//console.log(data);return;
if(data.length<=0){
$('.pull-loading').html("已加载全部");
}else{
var html = '';
for(var i=0;i<data.length;i++){
var url = "{:U('News/new_content')}?id="+data[i]['id'];
html += '<div class="f1 clearfix">';
html += ' <a href="'+url+'">';
html += ' <p class="p1 news_list_item chao">';
html += ' <span class="s1">'+data[i]['title']+'</span>';
html += ' </p>';
html += ' <img src="__PUBLIC__/front/images/a23.png" alt="" class="im2">';
html += ' </a>';
html += ' </div>';
}
$("#scroller").append(html);
$('.pull-loading').html("上拉加载");
}
}
});
}
pullOnLoad();
</script>两个js下载地址在这里：
百度云盘链接：https://pan.baidu.com/s/1C3skgL0deD2GVo0tQJp3SQ
提取码：e7oz
当您发现内容错误或代码bug，以及下载链接无法使用等，请点击屏幕右下角的上报错误来进行提交，我们会尽快修正。
本程序所有源码和工具完全免费，当本网站内容如果侵犯了您的权益，请联系我们，我们会尽快处理，感谢您的合作。
上一篇： js简单的计时器开始和结束
下一篇： js倒计时方法（青哥总结）
相关文章
评论：
文明上网理性发言，请遵守 新闻评论服务协议
上报错误
