get_more_star.html 9.2 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>明星访谈更多</title>
    <link rel="stylesheet" href="__TMPL__/public/assets/css/layui.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/bootstrap4.0.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/header.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/show.css">
</head>

<body>
    <!--头部-->
    <include file="public@header">
    <!-- main 背景 -->
    <div class="show_InMain show_3_Box">
        <!-- 明星访谈盒子 -->
        <div class="show_InMain_box">
            <!-- 顶部标题 -->
            <div class="show_INMain_tit clearfix">
                <div class="show_IN1 clearfix">
                    <img src="__TMPL__/public/assets/starImg/aicon_48.png" alt="">
                    <p>明星<span>访谈</span></p>
                    <h2>Star Interview</h2>
                </div>
                <!-- 更多 -->
                <!--<div class="show_IN2">-->
                    <!--<a href=""> MORE+ </a>-->
                <!--</div>-->
            </div>
            <!-- 内容--1 -->
            <div class="show_INMain_con clearfix">
                <img class="show_INMain_con1" src="__TMPL__/public/assets/starImg/aicon_31.png" alt="">
                <div class="show_INMain_con2 clearfix">
                    <img class="show_INMain_con3" src="__TMPL__/public/assets/starImg/aicon_32.png" alt="">
                    <h2>胡歌</h2>
                    <h3>著名国际巨星 慈善家</h3>
                    <p>那年孩子们都上大学了,我孑然一身,几个老弟兄说出国走走看看,一个老嫂子会点外语,于是我们就自由行到了欧洲,法国,德国,意大利,几个国家转了一圈,外国的天气,气候真是清新,不去的时候不想,但是身临其境的时候就会感受到巨大的差异。巴黎车水马龙,意大利热情奔放,</p>
                </div>
            </div>
            <!-- 内容--2 -->
            <div class="show_3_list">
                <ul class="clearfix">
                    <li>
                        <img src="__TMPL__/public/assets/starImg/bicon_24.png" alt="">
                        <div class="show_3_list_txt">
                            <h1>斯嘉丽·约翰逊</h1>
                            <h2>著名国际巨星 慈善家</h2>
                            <p>

                                这两位的婚礼这几天在微博上是大有刷屏之势,新娘新郎就算了,连参加婚礼的宾客们都轮番换着上热搜,那叫一个热闹。其实除了刘诗诗吴奇隆,之前杨幂和刘恺威的婚礼也是选在了巴厘岛。地处印度尼西亚的巴厘岛是著名的旅游海岛,岛上热带风情浓郁,风景绮丽无比,这里的细阔沙滩. 魂牵梦绕。

                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="__TMPL__/public/assets/starImg/bicon_24.png" alt="">
                        <div class="show_3_list_txt">
                            <h1>斯嘉丽·约翰逊</h1>
                            <h2>著名国际巨星 慈善家</h2>
                            <p>

                                这两位的婚礼这几天在微博上是大有刷屏之势,新娘新郎就算了,连参加婚礼的宾客们都轮番换着上热搜,那叫一个热闹。其实除了刘诗诗吴奇隆,之前杨幂和刘恺威的婚礼也是选在了巴厘岛。地处印度尼西亚的巴厘岛是著名的旅游海岛,岛上热带风情浓郁,风景绮丽无比,这里的细阔沙滩. 魂牵梦绕。

                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="__TMPL__/public/assets/starImg/bicon_24.png" alt="">
                        <div class="show_3_list_txt">
                            <h1>斯嘉丽·约翰逊</h1>
                            <h2>著名国际巨星 慈善家</h2>
                            <p>

                                这两位的婚礼这几天在微博上是大有刷屏之势,新娘新郎就算了,连参加婚礼的宾客们都轮番换着上热搜,那叫一个热闹。其实除了刘诗诗吴奇隆,之前杨幂和刘恺威的婚礼也是选在了巴厘岛。地处印度尼西亚的巴厘岛是著名的旅游海岛,岛上热带风情浓郁,风景绮丽无比,这里的细阔沙滩. 魂牵梦绕。

                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 内容--3 -->
            <div class="show_INMain_con show_3_con3 clearfix">
                <img class="show_INMain_con1" src="__TMPL__/public/assets/starImg/aicon_31.png" alt="">
                <div class="show_INMain_con2 clearfix">
                    <img class="show_INMain_con3" src="__TMPL__/public/assets/starImg/aicon_32.png" alt="">
                    <h2>林允儿</h2>
                    <h3>著名国际巨星 慈善家</h3>
                    <p>那年孩子们都上大学了,我孑然一身,几个老弟兄说出国走走看看,一个老嫂子会点外语,于是我们就自由行到了欧洲,法国,德国,意大利,几个国家转了一圈,外国的天气,气候真是清新,不去的时候不想,但是身临其境的时候就会感受到巨大的差异。巴黎车水马龙,意大利热情奔放,</p>
                </div>
            </div>

            <!-- 底部翻页 -->
            <!-- <div class="show_3_nextPage clearfix">
                <span> < </span>
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <span> > </span>
            </div> -->

            <!--分页-->
            <div class="pagination">
                {$page|default=''}
            </div>

        </div>
        <!--<div id="page">-->

        <!--</div>-->
    </div>
    <!-- 底部 -->
    <include file="public@footer">
    <script src="__TMPL__/public/assets/js/jquery-3.2.1.min.js"></script>
    <script src="__TMPL__/public/assets/js/layui.js"></script>
    <script src="__TMPL__/public/assets/js/public.js"></script>
    <script>
        // page 分页
        $(function() {
            var dataObj = {
                dataList: [{
                    img: "__TMPL__/public/assets/starImg/bicon_24.png",
                    name: "121212",
                    name_tit: "按时大苏打啊实打",
                    content: "偶是女的芬兰首都基辅九分零四"
                }, {
                    img: "__TMPL__/public/assets/starImg/bicon_24.png",
                    name: "121212",
                    name_tit: "按时大苏打啊实打",
                    content: "偶是女的芬兰首都基辅九分零四"
                }, {
                    img: "__TMPL__/public/assets/starImg/bicon_24.png",
                    name: "121212",
                    name_tit: "按时大苏打啊实打",
                    content: "偶是女的芬兰首都基辅九分零四"
                }, {
                    img: "__TMPL__/public/assets/starImg/bicon_24.png",
                    name: "121212",
                    name_tit: "按时大苏打啊实打",
                    content: "偶是女的芬兰首都基辅九分零四"
                }, {
                    img: "__TMPL__/public/assets/starImg/bicon_24.png",
                    name: "121212",
                    name_tit: "按时大苏打啊实打",
                    content: "偶是女的芬兰首都基辅九分零四"
                }]
            }
            var  currPage = 1; // 当前页

            var  limit = 1; // 每页显示的条数

            var count = dataObj.dataList.length;
            console.log(count);

            layui.use('laypage', function() {
                var laypage = layui.laypage //分页
                    //执行一个laypage实例
                laypage.render({ //layui分页 
                    elem: 'page',
                      //分页容器id
                        count: count, //总条数
                      curr: currPage, //当前页
                      limit: limit, //每页的条数
                    //     limits: 1, //可选择每页数目
                      prev: "<", //上一页图标
                      next: ">", //下一页图标
                      theme: 'xxx', //分页主色
                    //   layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], //设置分页组件显示
                        jump: function(obj, first) {        
                        if (!first) { //设置首次渲染分页无需走业务逻辑处理函数,不然会陷入死循环
                            console.log(obj);
                            currPage = obj.curr; 
                            console.log(currPage)       
                            limit = obj.limit;              
                        }          
                    }    
                })
            })
        });
    </script>
</body>

</html>