YDUI Touch InfiniteScroll无限加载数据测试
2024-05-30 04:41:04
为什么80%的码农都做不了架构师？>>> 
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>InfiniteScroll</title><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/><meta content="yes" name="apple-mobile-web-app-capable"/><meta content="black" name="apple-mobile-web-app-status-bar-style"/><meta content="telephone=no" name="format-detection"/><link rel="stylesheet" href="../css/ydui.css?rev=@@hash"/><link rel="stylesheet" href="../css/demo.css"/><script src="../js/ydui.flexible.js"></script>
</head>
<body><section class="g-flexview"><header class="m-navbar"><a href="list.html" class="navbar-item"><i class="back-ico"></i></a><div class="navbar-center"><span class="navbar-title">InfiniteScroll</span></div></header><section class="g-scrollview" id="J_List"><div id="J_ListContent" class="m-list list-theme1"></div></section></section><!--<script id="J_ListHtml" type="text/html">{{each list as data}}<a href="{{data.url}}" class="list-item"><div class="list-img"><img src="http://static.ydcss.com/uploads/ydui/goods_default.jpg" data-url="{{data.img}}"></div><div class="list-mes"><h3 class="list-title">{{data.title}}</h3><div class="list-mes-item"><div><span class="list-price"><em>¥</em>{{data.marketprice}}</span><span class="list-del-price">¥{{data.productprice}}</span></div></div></div></a>{{/each}}
</script>--><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://static.ydcss.com/libs/arttemplate/template.js"></script>
<script src="../js/ydui.js"></script>
<script>!function () {/* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */var page = 1, pageSize = 10;$('#J_List').infiniteScroll({binder: '#J_List', //很关键pageSize: pageSize,initLoad: true,loadingHtml: '<strong>加载中...</strong>', /* 当然也可以<img src="../img/loading.gif" /> */loadListFn: function () {var def = $.Deferred();/* 通过自定义的方法获取数据 */$.ajax({url: './ajax.php',dataType: 'json',data: {page: page, pagesize: pageSize},success: function (ret) {console.log(ret.data);/* 假设ret.list为后端返回的列表数组 *//* 用你喜欢的方法将获取到的数据拼接成HTML，然后插入；*//* 建议使用模板引擎，示例使用artTemplate；https://github.com/aui/artTemplate */var html = ret.data;for (var i = 0; i < html.length; i++) {//拼接字符串var str = '';str += "<a href=\"{{data.url}}\" class=\"list-item\">\n" +"<div class=\"list-img\">\n" +"<img src=\"http://ai.91xiaoyu.com/plug/ydui/demo/html/logo.png\" data-url=\"" + html[i].course_name + "\">\n" +"</div>\n" +"<div class=\"list-mes\">\n" +"<h3 class=\"list-title\">" + html[i].course_name + "</h3>\n" +"<div class=\"list-mes-item\">\n" +"<div>\n" +"<span class=\"list-price\"><em>¥</em>" + html[i].student_name + "</span>\n" +"<span class=\"list-del-price\">¥" + html[i].mobile + "</span>\n" +"</div>\n" +"</div>\n" +"</div>\n" +"</a>";$('#J_ListContent').append(str);$('#J_ListContent').append(str).find('img').lazyLoad({binder: '#J_List'});}/* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */def.resolve(ret.data);/* 页码自增1 */++page;}});return def.promise();}});/*// 根据实际情况自定义获取数据方法var page = 1, pageSize = 10;var loadMore = function (callback) {$.ajax({url: 'http://list.ydui.org/getdata.php?type=backposition',dataType: 'jsonp',data: {page: page,pagesize: pageSize},success: function (ret) {typeof callback == 'function' && callback(ret);}});};$('#J_List').infiniteScroll({binder: '#J_List',pageSize: pageSize,initLoad: true,loadingHtml: '<img src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>',loadListFn: function () {var def = $.Deferred(); //todo 1loadMore(function (listArr) {var html = template('J_ListHtml', {list: listArr});$('#J_ListContent').append(html).find('img').lazyLoad({binder: '#J_List'});def.resolve(listArr); //todo 2++page;});return def.promise(); //todo 3}});*/}();
</script>
</body>
</html>
<?phpdefine("HOST", "xxxxx"); //主机名define("USER", "zzzzzz"); //账号define("PASS", "vvvvv"); //密码define("DBNAME", "dddd-database"); //数据库名$conn = new mysqli(HOST, USER, PASS);$conn->select_db(DBNAME);//当前页$page = $_GET["page"] ? $_GET["page"] : 1;//每页显示条数$pagesize = $_GET["pagesize"] ? $_GET["pagesize"] : 10;//偏移量$ofset = ($page - 1) * $pagesize;$t_sql = "SELECT student_name,course_name,mobile FROM edu_trxorder WHERE course_id=898 AND trx_status='SUCCESS'";$t_res = $conn->query($t_sql);//总记录数$total = $t_res->num_rows;//总页数$totalpage = ceil($total / $pagesize);$sql = "SELECT student_name,course_name,mobile FROM edu_trxorder WHERE course_id=898 AND trx_status='SUCCESS' LIMIT $ofset,$pagesize ";//结果集$result = $conn->query($sql);$data = [];while ($row = $result->fetch_assoc()) {$data[] = $row;}$a = array("pages" => $total, "data" => $data);echo json_encode($a);
参考资料：
http://www.ydui.org/
https://github.com/ydcss/ydui
转载于:https://my.oschina.net/yjft/blog/1525129
YDUI Touch InfiniteScroll无限加载数据测试相关推荐
- 花瓣网方砖布局 图片内容无限加载 用户体验才是王道
jquery特效制作目前用户体验设计比较受欢迎的pinterest和花瓣网的图片内容无限加载,方砖式的布局方式.用jquery Masonry插件制作当鼠标拖动滚动条时图片和内容数据无限滚动加载,直到 ...
- 使用Intersection Observer API创建无限加载组件
本文章翻译自:https://vueschool.io/articles/vuejs-tutorials/build-an-infinite-scroll-component-using-inters ...
- JS实现-页面数据无限加载
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...
- JRoll 2 使用文档（史上最强大的下拉刷新，滚动，无限加载插件）
概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...
- jq分页 不刷新页面_滑动无限加载和分页哪个对搜索引擎更友好呢？
滑动无限加载和分页哪个对搜索引擎更友好呢? 最近,做搜索引擎优化的工作,发现谷歌只搜索了第一次加载更多前的页面,做这个功能前就有这个担心,结果还是发生了,加载更多后的页面搜索不到. 对搜索引擎优化工作 ...
- 如何快速写一款小而美的“上滑无限加载的控件”？| 博文精选
作者 | ShuSheng007 责编 | 郭芮 出品 | CSDN博客 在日常从事Android开发工作时,经常会遇到下拉刷新列表页面,上拉自动加载列表的需求, GitHub上已经有很多关于这方面的 ...
- 基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览 源码下载 实 ...
- Jetpack Compose 无限加载列表（滚到底部自动加载更多）
Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢? 两种方法可供选择: 基于 paging ...
- 前端技术周刊 2018-12-24：移动无限加载
前端快爆 Electron 4.0.0 发布,不再支持 macOS 10.9 及以下版本.内核更新至 Chromium 69.Node.js 10.11.0.V8 6.9.427.24.? 点评:嗯, ...
- ajax瀑布流插件,jQuery瀑布流无限加载插件：jquery.falless.js
慌慌张张,匆匆忙忙,为何生活总是这样? 难道说,我的理想,就是这样度过一生的时光?........... 真的是一年一年飞逝而去,而人的一生,又有几个一年? 第一个四年即将结束,得到了什么?又失去了什 ...
最新文章
- C语言函数集（二十一）
- python发明者叫什么-python发明人
- 首届中国IT架构大师高峰论坛（十年架构之路汇成一句话！）
- Linux应用--日志定时清理
- h3c s7506e 配置手册_H3C交换机s5500Web登录配置
- jquerymobile应用中session、cookie
- Train Problem II 卡特兰裸题（入门题）
- java spi技术,Java SPI机制
- python识别验证码ocr_Python3使用tesserocr识别字母数字验证码
- OpenGL基础23：平行光与点光源
- 修改页面后获得flag_逆向基础题五：获取Flag
- 中国移动计算机二面笔试题,中国移动笔试面试经验
- mac系统 彻底删除安全助手
- UE4/UE5 python打包Pak和Runtime加载Pak
- PTA习题【python】 6-8 jmu-python-发牌
- P1138 第k小整数
- Java笔记总结（二）
- 【修真院java小课堂】clean,install,package,deploy分别代表什么含义？
- java array arraylist
- Tiny RTC DS1307 时钟模块 完整代码（Arduino）及一些要注意的地方