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

在这里插入图片描述

<!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>

  <!-- <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() {
      // 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>';
    }
}
posted @ 2022-04-02 09:47  coderwcb  阅读(173)  评论(0)    收藏  举报