ThinkPHP et jquery implémentent le chargement pour expliquer plus d'exemples

Cet article présente principalement ThinkPHP+jquery pour implémenter le code de fonction « charger plus », et utilise un exemple de code pour expliquer l'implémentation du code pour charger plus. Il est d'une grande valeur pratique. Les amis qui en ont besoin peuvent s'y référer. j'espère que cela pourra aider tout le monde.

ThinkPHP+jQuery implémente "charger plus"

Dans de nombreuses interfaces Web, des démos qui cliquent sur des boutons pour charger les dernières données sont utilisées L'exemple suivant utilise l'implémentation thinkphp+jquery. exemple :

Les résultats à atteindre sont à peu près les suivants

La première étape

Fichier modèle

      <!--软件-->
      <p class="lists switcher-panel switcher-panel-cur">
        <ul class="xinhao">
          {volist name="apps" id="vo"}
          <li class="app-item link">
            <p class="list-img">
              <img src="/public/static/images/{$vo.Pic}" alt=""></p>
            <p class="list-cont">
              <p class="lt-c-tit">
                <h2>
                  <a href="#nogo" rel="external nofollow" rel="external nofollow" >{$vo.AppName}</a></h2>
                <span>8.59MB</span></p>
              <p class="lt-c-s-n">
                <p class="lt-c-s-n-l">
                  <p class="star">
                    <p style="width: 73%;"></p>
                  </p>
                </p>
                <span>{$vo.DownloadCount}万次下载</span></p>
            </p>
            <p class="btns">
              <a class="dl-btn js-downloadBtn" href="http://shouji.360tpcdn.com/170214/5aeae868026625e95b389b357fbdd186/com.ss.android.article.video_116.apk" rel="external nofollow" >
                <span></span>下载</a>
            </p>
          </li>
          {/volist}
        </ul>
        <if condition="count($apps) eq 5">
          <p class="load-bar" id="loadmore">
            <a href="javascript:;" rel="external nofollow" class="user-pl-more-btn loadmore" data-type="1">加载更多</a>
          </p>
        </if>
        <p class="load-bar" id="tip">
        </p>
      </p>

Étape 2

Fichier backend

class Index
{
  //打印首页
  public function index()
  {
    $total=db('apps')->count();
    $apps=db('apps')->where('AppStatus',1)->limit(5)->order("AppID ASC")->select();
    //var_dump($apps);
    $view = new View();
    $view->assign('total',$total);
    $view->assign('apps',$apps);
    return $view->fetch('index');
  }

  public function data()
  {
    $start = Input('post.start');
    //echo($start);
    $list = db('apps')->limit($start, 5)->order('AppID asc')->select();
    return (array( 'result'=>$list,'status'=>1, 'msg'=>'获取成功！'));
  }

}

Étape 3

Js asynchrones dans les modèles

  <script>
    //加载更多
    var nStart = 5;
    $(&#39;#loadmore&#39;).click(function() {
      var _this = $(".xinhao");
      if(nStart >= {$total}) {
        //alert(&#39;后面没有数据了！&#39;);
        $("#loadmore").text(&#39;没有数据了亲...&#39;).css({"border-top":"1px solid #d4d5d6","height":"30px","line-height":"30px"});
        return false;
      } else {
        $.post("{:url(&#39;Index/data&#39;)}", {start: nStart}, function(res) {
          $.each(res[&#39;result&#39;], function(i, item) {
            _this.append(&#39;<li class="app-item link">\
              <p class="list-img">\
              <img src="/public/static/images/&#39;+item.Pic+&#39;"alt=""/></p>\
              <p class="list-cont">\
              <p class="lt-c-tit">\
              <h2>\
              <a href="#nogo" rel="external nofollow" rel="external nofollow" >&#39;+item.AppName+&#39;</a></h2>\
            <span>8.59MB</span></p>\
            <p class="lt-c-s-n">\
              <p class="lt-c-s-n-l">\
              <p class="star">\
              <p style="width: 73%;"></p>\
              </p>\
              </p>\
              <span>&#39;+item.DownloadCount+&#39;万次下载</span></p>\
            </p>\
            <p class="btns">\
              <a class="dl-btn js-downloadBtn" href="#" rel="external nofollow" >\
              <span></span>下载</a>\
              </p>\
              </li>&#39;);
          });
        });
        nStart += 5;
      }
    });
    </script>

Recommandations associées :

L'applet WeChat se charge davantage et cliquez pour voir plus de fonctionnalités Introduction

Le défilement Angularjs charge plus de données

implémentation js du chargement de plus d'exemples de fonctions

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!