tp5+ajax 结合上拉加载功能,上拉加载在微信小程序里面是最常见的了,今天就来说下网页上的上拉加载。前端代码:;;;;;;上拉加载;;;;;;;;;;;;function;fontSize(){;;;;;;;;var;deviceWidth=d
tp5+ajax 结合上拉加载功能,上拉加载在微信小程序里面是最常见的了,今天就来说下网页上的上拉加载。
前端代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<title>上拉加载</title>
<script src="/public/static/tpl/index/foundation/js/jquery.js?ver19.4.48"></script>
<script src="iscroll.js"></script>
<link rel="stylesheet" href="app.css">
<script type="text/javascript">
function fontSize(){
var deviceWidth=document.documentElement.clientWidth>640?640:document.documentElement.clientWidth;
document.documentElement.style.fontSize=(deviceWidth/25)+"px";
}
fontSize();
window.onresize=fontSize;
</script>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<ul class="p1_list">
</ul>
<div class="clearboth"></div>
<div class="pull-loading">
上拉加载
</div>
</div>
</div>
<script>
$(function(){
$.ajax({
//请求方式
type:'GET',
//发送请求的地址
url:'https://www.tpxhm.com/wxapi/Weixin/ajaxvote10',
//服务器返回的数据类型
dataType:'json',
//发送到服务器的数据,对象必须为key/value的格式,jquery会自动转换为字符串格式
data:'',
success:function(data){
console.log(data.num10);
var arrlist=data.num10;
for(var p in arrlist){
$('.p1_list').append('<li><img src="'+arrlist[p].img+'" alt=""><p>'+arrlist[p].title+'</p></li>')
}
}
});
})
</script>
<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 = 10;
var page = 4; //每次加载4条
function pullOnLoad() {
setTimeout(function () {
$.ajax({
url: "https://www.tpxhm.com/wxapi/Weixin/ajaxvote",
type: "get",
dataType: 'json',
success: function (data) {
// console.log(data);
var datares=data.re
var data_length = datares.length;//数据的总长度
var remainder = data_length % page;//余数
if ( data_length >= (num+page)){
for (var j = num; j < num + page; j++){
$('.p1_list').append('<li><img src="'+datares[j].img+'" alt=""><p>'+datares[j].title+'</p></li>')
}
num+=page;
}else if (remainder != 0 && data_length-num == remainder){
for (var j = num; j < num + remainder; j++){
$('.p1_list').append('<li><img src="'+datares[j].img+'" alt=""><p>'+datares[j].title+'</p></li>')
}
num+=page;
}else{
$('.pull-loading').html("没有了哟");
}
myscroll.refresh();
},
error: function () {
console.log("出错了");
}
});
myscroll.refresh();
}, 500);
}
</script>
</body>
</html>
Demo:下拉demo(点击预览)
后端代码:
public function ajaxvote10(){
$num10=db('noteajax')->order('id desc')->field('img,title')->limit(10)->select();
return json(['code'=>200,'msg'=>'success','num10'=>$num10]);
}
public function ajaxvote(){
$re=db('noteajax')->order('id desc')->field('img,title')->select();
return json(['code'=>200,'msg'=>'success','re'=>$re]);
}
沃梦达教程
本文标题为:tp5+ajax 结合上拉加载功能
猜你喜欢
- 用nohup命令实现PHP的多进程 2023-09-02
- windows下9款一键快速搭建PHP本地运行环境的好工具(含php7.0环境) 2023-09-02
- php微信公众号开发之秒杀 2022-11-23
- PHP中PDO事务处理操作示例 2022-10-15
- laravel实现按月或天或小时统计mysql数据的方法 2023-02-22
- Laravel balde模板文件中判断数据为空方法 2023-08-30
- PHP仿tp实现mvc框架基本设计思路与实现方法分析 2022-10-18
- laravel通用化的CURD的实现 2023-03-17
- PHP实现微信支付(jsapi支付)流程步骤详解 2022-10-09
- PHP简单实现二维数组的矩阵转置操作示例 2022-10-02