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

Myth丶恋晨 2022-11-29 11:49 163阅读 0赞

![在这里插入图片描述][20200820112915977.gif_pic_center]

<!DOCTYPE html
      PUBLIC "-//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>
    
      
    
    
    
      <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() { 
          // infinite
          var 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>

<?php
    
    
    session_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>';
        }
    }

[20200820112915977.gif_pic_center]: /images/20221124/f9e67c3cf5874770a45f75c76ba40567.png