帝国CMS二次开发ajax点击加载更多内容 _ 技术文摘

ajax点击加载更多内容

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <link rel="stylesheet" href="[!--news.url--]skin/listnews/css/listnews.css">

</head>

<body>

<div class="main-list">

          <ul id="list">

          </ul>



          <div class="load-more">

            <div class="add-more" style="display: flex">

              <i></i>

              <span>加载更多</span>

            </div>

            <div class="add-ing" style="display: none">

              <i></i>

              <span>加载中...</span>

            </div>

          </div>

        </div>





<script src="[!--news.url--]skin/listnews/js/jquery.min.js"></script>

<script>

(function (win, $) {

  $.listnews = {

    pageNum: 0,

    initLoadMore() {

      let _self = this;

      $(".load-more").on('click', '.add-more', function () {

        $(this).css({ display: 'none' }).siblings('.add-ing').css({ display: 'flex' });

        _self.pageNum++;

        _self.initGetData(_self.pageNum);

        setTimeout(() => {

          $(this).css({ display: 'flex' }).siblings('.add-ing').css({ display: 'none' });

        }, 1000)

      })

    },

    initGetData(index) {

      let _this = this;

      $.ajax({

        url: '[!--news.url--]e/extend/listnews/?page=' + index + '&pageNum=5&classid=13',

        /*

                zhuxubai202112

                page：分页

                pageNum:显示多少数量

                classid：栏目ID

                */

                type: 'get',

        dataType: 'json',

        success: function (jsonData) {

          var html = '';

          if (jsonData.info) {

            jsonData.info.forEach(function (val) {

              html += `<li class="item">

                <a href="${val.titleurl}"><p>${val.title}</p><span class="date">${val.newstime}</span></a>

              </li>`;

            })

            $('#list').append(html);

          }

        }

      })

    },

    init() {

      this.initGetData(this.pageNum);

      this.initLoadMore();

    }

  }

  $.listnews.init();

})(window, jQuery)

    </script>

</body>

</html>

2，css代码

@charset "utf-8";

/*loadMore*/

.main-list{ clear:both;}

.main-list ul li{ clear:both; list-style:none;}

.main-list ul li p{ float:left;}

.main-list ul li span{ float:right;}

.load-more {clear:both;width: 100%;margin: 20px 0;border: 1px solid #e5e5e5;border-radius: 3px;text-align: center;cursor: pointer;position: relative;font: normal 20px/30px "Microsoft Yahei";color: #404040;height: 60px;}

.load-more:hover {color: #0b6695;border-color: #0b6695;}

.load-more .add-more, .load-more .add-ing {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}

.load-more .add-more i {display: block;width: 20px;height: 20px;overflow: hidden;margin: 5px 10px;background: url("../images/add_more.png") no-repeat 0 0;font-size: 40px;font-style: normal;-webkit-transition: transform .3s;-o-transition: transform .3s;transition: transform .3s;}

.load-more .add-more:hover i {background-position: 0 -50px;-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}

.load-more .add-ing {color: #f04343;}

.load-more .add-ing i {display: block;width: 24px;height: 24px;overflow: hidden;margin: 5px 12px;background: url("../images/add_more.png") no-repeat 0 -100px;font-size: 40px;-webkit-transform-origin: center;-moz-transform-origin: center;-ms-transform-origin: center;-o-transform-origin: center;transform-origin: center;-webkit-animation: rotateIn .8s linear infinite;-moz-animation: rotateIn .8s linear infinite;-ms-animation: rotateIn .8s linear infinite;-o-animation: rotateIn .8s linear infinite;animation: rotateIn .8s linear infinite;}

3，index.php

<?php

require('../../class/connect.php'); //引入数据库配置文件和公共函数文件

require('../../class/db_sql.php'); //引入数据库操作文件

require('../../data/dbcache/class.php'); //引入栏目缓存文件

$link=db_connect(); //连接MYSQL

$empire=new mysqlquery(); //声明数据库操作类

$editor=1; //声明目录层次

$page=intval($_GET[page]);//分页

$pageNum=intval($_GET[pageNum]);//显示多少条

$classid=intval($_GET[classid]);//栏目ID

$tool=$page*$pageNum;

$mysql=$empire->query("select * from {$dbtbpre}ecms_news where classid=$classid order by newstime desc limit $tool,$pageNum");

while($r=$empire->fetch($mysql))

{

    $json_arr[] = array(

    "title"=>$r['title'],

    "id"=>$r['id'],

    "classid"=>$r['classid'],

    "newstime"=>date("Y-m-d H:i:s",$r['newstime']),

    "titleurl"=>$r['titleurl']

    ); //压入数组

}

$result=array('info'=>$json_arr,'pageNum'=>$tool);

$json=json_encode($result);

echo $json;

db_close(); //关闭MYSQL链接

$empire=null; //注消操作类变量

?>

帝国CMS二次开发ajax点击加载更多内容

1发布者资料

热门文章

技术文摘

帝国CMS二次开发ajax点击加载更多内容

分享到

1发布者资料

热门文章

技术文摘