YDUI Touch +mescroll上拉加载测试

为什么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"/><link rel="stylesheet" href="../js/mescroll.min.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><span id="mess"></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>--><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><span id="mess"></span></div></header><section class="g-scrollview" id="J_List"><div id="J_ListContent" class="m-list list-theme1"></div></section></section><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 src="../js/js.cookie.js"></script><script src="../js/store.modern.min.js"></script><script src="../js/mescroll.min.js"></script><script>function randNum(minnum, maxnum) {return Math.floor(minnum + Math.random() * (maxnum - minnum));}!function () {var mescroll = new MeScroll("J_List", { //第一个参数"mescroll"对应上面布局结构div的id//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callbackdown: {callback: downCallback //下拉刷新的回调},up: {auto: true,page: {num: 0,size: 15,time: null},callback: upCallback //上拉加载的回调}});//下拉刷新的回调function downCallback() {$.ajax({url: 'ajax.php',success: function (data) {//联网成功的回调,隐藏下拉刷新的状态;mescroll.endSuccess(); //无参//设置数据//setXxxx(data);//自行实现 TODO},error: function (data) {//联网失败的回调,隐藏下拉刷新的状态mescroll.endErr();}});}//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10function upCallback(page) {$.ajax({url: 'ajax.php?page=' + page.num + "&pagesize=" + page.size,success: function (data) {//联网成功的回调,隐藏下拉刷新和上拉加载的状态;//参数data.length:当前页的数据总数//mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容;//列表如果无下一页数据,则提示无更多数据;//如果不传data.length,则仅隐藏下拉刷新和上拉加载的状态var jsondata = eval('(' + data + ')');var html = jsondata.data;mescroll.endSuccess(html.length);//var randNum = randNum(1,10);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=\"" + "./images/" + randNum(1,10) + ".jpg" + "\">\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).find('img').lazyLoad({binder: '#J_List'});}},error: function (e) {//联网失败的回调,隐藏下拉刷新和上拉加载的状态mescroll.endErr();}});}/* 通过自定义的方法获取数据【通常是需要定义变量当前第几页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=\"" + "./images/" + (i+1) + ".jpg" + "\">\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).find('img').lazyLoad({binder: '#J_List'});}/!* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 *!/def.resolve(ret.data);/!* 页码自增1 *!/++page;}});return def.promise();},/!*** 当前从详情页返回列表页时调用此方法* @param listData 该次所需加载的数据集合* @param retPage 该次加载的页码*!/loadStorageListFn: function (listData, retPage) {var def = $.Deferred();page = retPage;var html = '';listData.forEach(function (val) {html += (val.list + '将数据拼接成html，格式同loadListFn方法一致');});$('#J_ListContent').append(html);def.resolve();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", "xxx");    //主机名define("USER", "bbbb");        //账号define("PASS", "cccc");        //密码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

http://www.mescroll.com/index.html

https://github.com/mescroll/mescroll

转载于:https://my.oschina.net/yjft/blog/1525700

YDUI Touch +mescroll上拉加载测试相关推荐

mescroll上拉加载的实现
html部分 <div id="mescroll" class="mescroll"> <ul class="recordl ...
php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
html 设置移动端页面滚动,a.html · 焚心/移动端页面上下滚动加多页面上拉加载功能及mescroll插件的使用 - Gitee.com...
我的我的交易记录可兑换签纸贺兑换历史活动名称:{{item.title}} 有效期至:{{item.time}} 合计可用额: {{item.price}}元去兑换交易记录: 兑换10. ...
React上拉加载和下拉刷新
最近在做一个功能,就是上拉加载下一页,用的是react搭建前端视图,以下是我的做法和遇到的相关问题及解决办法: 案例一:回到顶部 class Home extends Component {consr ...
上拉加载下拉刷新了解下
2019独角兽企业重金招聘Python工程师标准>>> 老样子,我们先,哦不,今天我们直接上思路,没有效果图,真的没有我们依旧从界面及逻辑两块进行分析 1.界面上,只分成简单的两块 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
Java txt 下拉刷新_手写上拉加载，下拉刷新（小demo）
背景使用过很多下拉刷新,上拉加载的插件,虽然也知道一点原理,但似乎一直不太完全能理解它,闲来无事,手写一个,感受下,借鉴了better-scroll的源码,功能当然相差甚远,也只是个简易版的实现,大 ...
Android ListView 实现下拉刷新上拉加载
转载请注明出处:http://blog.csdn.net/allen315410/article/details/39965327 1.简介无疑,在Android开发中,ListView是使用非常频 ...
【Android归纳】基于XListView的下拉刷新、上拉加载更多的控件分析
目录前言功能介绍总体设计组成类关系图详细设计 XlistViewHeader原理分析 XListViewFooter原理分析 XListView原理分析代码带注释下载目录前言如果你 ...
vue 移动端实现上拉加载更多
根据项目需求实现上拉加载更多-我用的是 vue-infinite-loading 插件实现的.下面是安装流程和使用方法:有需要直接拿去用第一步:安装 npm install vue-infinite ...

YDUI Touch +mescroll上拉加载测试

YDUI Touch +mescroll上拉加载测试相关推荐

最新文章

热门文章