前端分頁

{extend name="/public/base"} 
{block name="title"} 直播專區 {/block} 
{block name="headerCss"}{/block} 
{block name="content"}
<link rel="stylesheet" href="__VM__/new/css/liveList.css">
<input value="0" id="page" type="hidden" />

<div class="wrap">
    <!-- 舊版導航 -->
    <!-- <div class="liveNav-box flex item-center">
        <div class="navItem all-item liveActive" data-type="1">正在直播</div>
        <div class="navItem live-item" data-type="2">全部</div>
    </div>
    <div class="liveFillDiv"></div> -->

    <!-- 新版導航 -->
    <div class="liveNav-box flex item-center flex-around">
        <div class="navItem all-item liveActive" data-type="1">正在直播</div>
        <div class="navItem live-item" data-type="5">全部</div>
    </div>
    <div class="liveFillDiv"></div>
    <!-- 直播專區 -->
    <div class="videolist-content flex flex-between flex-wrap" id="videoData" >
        <!-- <div class="live_video-item">
            <a href="" class="item_wrapper flex column">
                <div class="item_cover">
                    <img src="__VM__/new/images/detailTest.png" alt="">
 -->                    <!-- 直播中 -->
<!--                     <div class="liveState flex item-center ">
                        <i class="onlive_point"></i>  
                        <div class="live_state-text flex">
                            <p>直播中</p>
                        </div>
                    </div>
                    <p class="live_time">2018年12月5日</p>
                </div>
                <p class="corseName">哈尼-baby</p>
                <p class="corseproduce">想要鍛鍊臂力嗎？想要鍛鍊臂力嗎？想要鍛鍊臂力嗎？</p>
            </a>
        </div> -->

    </div>
    <div class="videolist-content" id="videoData2"></div>
    <!-- <div class="videolist-content" id="videoData1"></div> -->

    <!-- 提示語 -->
    <!-- <div class="classtips">- 沒有更多課程了 -</div> -->
</div>
{/block} 
{block name="footer"}{/block} 
{block name="footerJs"}
<script>

window.onload = function () {
    var isloading = 0;
    var t_page = 0; //頁數
    var type = $('.liveActive').attr('data-type');
    liveListLoad(type);

    $('.navItem').on('click', function (e) {
        var target = e.target;
        var type = $(target).attr('data-type');
        isloading = 0;
        t_page = 0;
        $('#videoData').empty();
        $(target).addClass('liveActive').siblings().removeClass('liveActive');

        liveListLoad(type);
    })
    // 滑動分頁
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() + 5 > $(document).height()) {
            var type = $('.liveActive').attr('data-type');
            liveListLoad(type);
        }
    });
    //加載數據
    function liveListLoad(type) {

        if (isloading == 0) {

            var loading = weui.loading('loading', {
                className: 'custom-classname'
            });//加載彈出框

            //記得要放在裏面，要不出錯
            t_page = parseInt(t_page) + 1;

            isloading = 1;
            $.ajax({
                url: '/video_mall/live/getAllLiveList',
                type: 'GET',
                data: {
                    type: type,
                    page: t_page,
                    size: 6,
                },
                success: function (data) {
                    loading.hide(function() {});//隱藏彈出框

                    if (data.code == 1) {
                        var str = '';
                        data.data.forEach(function (el) {
                            var live_status = get_status(el.live_status);
                            var start_time =  get_time(el.start_time);
                            str +=
                            ' <div class="live_video-item">' +
                            '     <a href="/video_mall/live/liveDetail?video_id='+el.number+'" class="item_wrapper flex column">' +
                            '         <div class="item_cover">' +
                            '             <img data-original="'+el.image_url+'" alt="" class="lazyloading">' +
                            '             <div class="liveState flex item-center ">' +
                            '                 <i class="onlive_point"></i>' +
                            '                 <div class="live_state-text flex">' +
                            '                     <p>'+live_status+'</p>' +
                            '                 </div>' +
                            '             </div>' +
                            '             <p class="live_time">'+start_time+'</p>' +
                            '         </div>' +
                            '         <p class="corseName">'+el.title+'</p>' +
                            '        <p class="corseproduce">'+el.introduce+'</p>' +
                            '     </a>' +
                            ' </div>';

                        })

                        $('#videoData').append(str);
                        $('img.lazyloading').lazyload({
                            effect:'fadeIn',
                            event:'sporty'
                        });
                        //懶加載
                        $('img.lazyloading').lazyload({
                            effect: 'fadeIn',
                        });
                        isloading = 0;
                        if (data.data.length == 0) {
                            isloading = 1;
                            var tips = `<div class="classtips">- 沒有更多課程了 -</div>`
                            $('#videoData' + type).append(tips);
                        }
                    } else if (data.code == 0) {
                        isloading = 1;
                    }
                },
                beforeSend: function () {

                    
                }
            })
        }
    }

}
//懶加載
$(function () {
    $('img.lazyloading').lazyload({
        effect: 'fadeIn',
        event: 'sporty'
    });
});
$(window).bind('load', function () {
    var timeout = setTimeout(function () {
        $('img.lazyloading').trigger('sporty')
    }, 500);
});

function get_time(time){

    // time = formatUnixtimestamp(time);
    var date = new Date(time * 1000);
    if(date.getMinutes() <= 9){
        var getMinutes = '0'+date.getMinutes();
    }else{
        getMinutes = date.getMinutes();
    }
    if(date.getHours() <= 9){
        var getHours = '0'+date.getHours();
    }else{
        getHours = date.getHours();
    }   
    var time_date = date.getFullYear()+'-'+date.getMonth()+'-'+date.getDate()+' '+getHours+':'+getMinutes;
    return time_date;
}

function get_status(status){
    var live_status;
    if(status == 0){
        live_status = '未直播';
    }else if(status == 1){
        live_status = '直播中';
    }else if(status == 2){
        live_status = '直播結束';
    }else if(status == 3){
        live_status = '暫停中';
    }else if(status == 4){
        live_status = '過期未直播';
    }
    return live_status;
}
</script> 
{/block}