使用weui滚动加载结合php实现分类页数据列表

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>产品列表</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><link rel="stylesheet" href="lib/weui.min.css"><link rel="stylesheet" href="css/jquery-weui.css"><link rel="stylesheet" href="css/style.css"><style>.SortDescCss {color: black !important;}.SortDescCss::after {border: 4px solid transparent;border-bottom: 4px solid #696464 !important;}</style>
</head><body ontouchstart><!--顶部搜索--><header class='weui-header fixed-top'><div class="weui-search-bar" id="searchBar"><form class="weui-search-bar__form"><div class="weui-search-bar__box"><i class="weui-icon-search"></i><input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的商品" required><a href="javascript:" class="weui-icon-clear" id="searchClear"></a></div><label class="weui-search-bar__label" id="searchText"style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"><i class="weui-icon-search"></i><span>搜索您想要的商品</span></label></form><a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a></div><div class="pro-sort"><div class="weui-flex"><div class="weui-flex__item"><div class="placeholder NormalCss sort_btn">综合</div></div><div class="weui-flex__item"><div class="placeholder sort_btn">按销量</div></div><div class="weui-flex__item"><div class="placeholder SortDescCss sort_btn">按价格</i></div></div></div></div></header><!--主体--><div class="weui-content" style="padding-top:85px;"><!--产品列表--滑动加载--><div class="weui-pull-to-refresh__layer"><div class='weui-pull-to-refresh__arrow'></div><div class='weui-pull-to-refresh__preloader'></div><div class="down">下拉刷新</div><div class="up">释放刷新</div><div class="refresh">正在刷新</div></div><div id="list" class='demos-content-padded proListWrap'><div class="pro-items"><a href="pro_info.html" class="weui-media-box weui-media-box_appmsg"><div class="weui-media-box__hd"><img class="weui-media-box__thumb"src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3171927341,219410697&fm=26&gp=0.jpg"alt=""></div><div class="weui-media-box__bd"><h1 class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</h1><div class="wy-pro-pri">¥<em class="num font-15">296.00</em></div><ul class="weui-media-box__info prolist-ul"><li class="weui-media-box__info__meta"><em class="num">0</em>条评价</li><li class="weui-media-box__info__meta"><em class="num">100%</em>好评</li></ul></div></a></div></div></div><div class="weui-loadmore"><i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span></div><!-- <div class="weui-footer" style="display: none;"><p class="weui-footer__text">已经到底了</p></div> --><script src="lib/jquery-2.1.4.js"></script><script src="lib/fastclick.js"></script><script src="js/jquery-weui_2.js"></script><script src="js/common.js"></script><script>$(function () {FastClick.attach(document.body);});</script><script>var page = 1;var limit = 10;var order = true;function initData(action='list') {// 初始加载$.ajax({type: "get",url: "./php/pro_list.php",data: "action="+action+"&category=" + args('category') + '&page=' + page + '&limit=' + limit,success: function (res) {document.querySelector('#list').innerHTML = res;pullToRefreshDone_fn();infinite_fn()}});}initData()function pullToRefreshDone_fn() {// 下拉刷新$(document.body).pullToRefresh().on("pull-to-refresh", function () {setTimeout(function () {$(document.body).pullToRefreshDone();}, 500);});}function infinite_fn() {// infinitevar loading = false;$(document.body).infinite().on("infinite", function () {if (loading) return;loading = true;if( !document.querySelector('.weui-footer')){page++;$("#list").append(getData(page, 10));}else{document.querySelector('.weui-loadmore').style.display = 'none'; //正在加载的图片}loading = false;});}function getData(page = 2, limit = 10) {var dataRes;$.ajax({type: "get",url: "./php/pro_list.php",async: false,data: "action=list&category=" + args('category') + '&page=' + page + '&limit=' + limit,success: function (res) {dataRes = res}});return dataRes;}</script><script></script>
</body></html>

<?phpsession_start();
// if (!$_SESSION['phone'] && !$_SESSION['password'] ) {//     echo '<script type="text/javascript">window.location.href="../login.html"</script>';
//     exit();
// }
require './connect.php';
if (isset($_GET['action']) && $_GET['action'] == 'list') {$start = ( $_GET['page']-1)*$_GET['limit'] ;$limit =$_GET['limit'];$res = $pdo->query("SELECT faceimg,title,price,info_id FROM a_book_info    WHERE category='{$_GET['category']}' order by info_id desc limit $start,$limit")->fetchAll(PDO::FETCH_ASSOC);// var_dump("SELECT * FROM a_book_info    WHERE category='{$_GET['category']}' order by info_id desc limit $start,$limit");// var_dump(count($res));if($res){foreach ($res as $list) {echo '<div class="pro-items"><a href="pro_info.html" class="weui-media-box weui-media-box_appmsg"><div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="'.$list['faceimg'].'" alt=""></div><div class="weui-media-box__bd"><h1 class="weui-media-box__desc">'.$list['title'].'</h1><h1 class="weui-media-box__desc">'.$list['info_id'].'</h1><div class="wy-pro-pri">¥<em class="num font-15">'.$list['price'].'</em>  <span style="color: gray;font-size:8px !important"><span>29</span>人收货</span></div><ul class="weui-media-box__info prolist-ul"><li class="weui-media-box__info__meta"><em class="num">0</em>条评价</li><li class="weui-media-box__info__meta"><em class="num">100%</em>好评</li></ul></div></a></div>';}}  else{echo '  <div class="weui-footer"  ><p class="weui-footer__text">已经到底了</p></div>';}
}

使用weui滚动加载结合php实现分类页数据列表相关推荐

jQuery weui 滚动加载
jQuery weui 滚动加载 1.把显示加载状态的代码放在需要滚动的容器中 <div class="weui-loadmore"><i class=" ...
jq weui 滚动加载的坑
1.一般情况下使用官网给个demo就可以了,如下: var loading = false; //状态标记 $(document.body).infinite().on("infinite& ...
每日三思:微信小程序多层级父子组件如何在子组件滚动加载
碰到的问题是如果将孙子组件单独拿出来是能滚动加载数据的,但是如果父组件存在切换的tab,子组件也存在tab切换,子组件就无法滚动加载数据示意图代码结构刚开始的处理思路在子组件中使用滚动加载,但 ...
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
<script> export default {data() {return {pageIndex: 0,//页码pageSize: 10,//每次加载条数lock: false,//防 ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
兼容IE8，滚动加载下一页
// 滚动加载下一页 var nowScrolledHeight = document.documentElement.scrollTop || document.body.scrollTop; va ...
ajax文字上下滚动,ajax页面底部滚动加载效果实例
html部分: //ajax读取的 data.html 使用append 的方式添加到这里 //ajax 状态文字输出到这里 [数据加载中][数据加载成功][没有数据了] js代码需要jquery支持 ...
vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
小程序之实现滚动加载
2019独角兽企业重金招聘Python工程师标准>>> 完整代码,片段来自码云 wallpaper 项目 <template><view class="a ...
jquery瀑布流布局和鼠标滚动加载
jquery部分: //引入JQ库(版本不同会有差别) <script src="https://cdn.bootcss.com.jquery/2.1.1/jquery.min.js& ...

使用weui滚动加载结合php实现分类页数据列表

使用weui滚动加载结合php实现分类页数据列表相关推荐

最新文章

热门文章