H5页面实现上拉加载更多
来源:互联网 发布:unity3d 文档 编辑:程序博客网 时间:2024/05/21 22:10
问题描述:
微信公众号开发中,文章列表需要实现与app端相同的上拉加载更多的功能。这里使用的PHP框架为ThinkPHP。
解决方式
H5页面——首页(显示页):
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>document</title> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /></head><body><!--作为文章列表的容器--><div class="wz-box"><!----包含文章列表内容><include file="wz/list_row"/></div></body><script src="__H5__/ws/js/jquery-2.0.0.min.js"></script><script type="text/javascript"> var num = 1; var scollif = true; $(document).ready(function(){ var range = 20; //距下边界长度/单位px var elemt = 280; //插入元素高度/单位px var maxnum = 1000; //设置加载最多次数 var totalheight = 0; var main = $(".wz-box"); //主体元素 $(window).scroll(function(){ //滚动条距顶部距离(页面超出窗口的高度) var srollPos = $(window).scrollTop(); totalheight = parseFloat($(window).height()) + parseFloat(srollPos); //判断上拉的高度以决定是否加载更多 if(($(document).height()-range) <= totalheight && num != maxnum) { if(scollif){ console.log(11) loadMore(); }else { console.log(2) } } }); }); //加载更多:ajax请求,获取文章列表 function loadMore() { scrollif = false; $.getJSON('__CONTROLLER__/articleList',{page: ++num},function (result){ //ajax请求完成后,将list_row页面append到list页面的最后 if(result.data.html){ $(".zk-box").append(result.data.html); } }); }</script></html>
H5页面——文章列表内容页
<volist name="list" id="v"><div class="wrap"> <div class='title'>{$v.title}</div> <div class="img"><img src="{$v.img}" /></div> <!--....其他文章列表内容--></div></volist>
服务器端:
public function articleList(){ if (!$page = I('get.page')) { $page = 1; } /*查询文章,分页并组装数据*/ //code.... //这里假设每页10篇文章 /******************************/ //将查询所得数据分配至模版 $this->assign('list', $list->result); if (IS_AJAX) { //ajax请求文章数据,分配到list_row页面 //请求完成后,使用js将list_row页面加载至list页面的最后 $content = $this->fetch('list_row'); return $this->json(1, '', ['html' => $content]); } else { //第一次进入首页时,并没有ajax请求,此时直接显示list页面 //进入首页后,其文章列表内容为空,ajax开始请求 return $this->display('list'); } }
阅读全文
0 0
- H5页面实现上拉加载更多
- H5基于iScroll实现下拉刷新,上拉加载更多
- H5页面上拉加载
- 基于iSroll插件实现html5页面上拉加载更多
- ListView实现上拉加载更多
- UITableView实现上拉加载更多
- android-----ListView上拉加载更多实现
- 实现上拉加载更多的SwipeRefreshLayout
- 实现上拉加载更多的SwipeRefreshLayout
- 上拉加载更多之ListView实现
- RecyclerView实现上拉加载更多
- React-实现上拉加载更多
- 上拉加载更多
- 上拉加载更多
- 上拉加载更多
- 上拉加载更多
- Android项目二 实现冷笑话页面的下拉刷新,上拉加载更多
- h5页面上拉加载下拉刷新问题
- OSG例子简介
- python 利用dictionary的get( ) 方法做计数统计
- python 读取txt,json和hdf5文件
- Eclipse中Mybatis无法读取xml文件的问题(mybatis绑定错误-- Invalid bound statement (not found))
- Application.mk语法解释
- H5页面实现上拉加载更多
- 5.18 特长生模拟题 Array
- GPS数据解析以及模块连接开发板
- 开博纪念
- 完全二叉树/ 满二叉树/二叉树遍历(前序、中序、后序、层序遍历)
- python-大智慧-VMACD-量指数平滑移动平均线
- 自制操作系统-0
- 第一次写博客
- 二维坐标系同一条直线点最多