pfhwyigou/mobile/web/js/videolist/index.js

$(function () {

    // 导航
    new Swiper('.vnav-box', {
        autoplay: false,//可选选项，自动滑动
        slidesPerView: 'auto',
        spaceBetween: 10,
    })


    /*
    *   区域选择功能特效
    */
    var wdata = new Object();
    wdata.cityID = 0;       //用于存放市县


//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
    var mescroll = new MeScroll("mescroll", {
        up: {
            callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            clearEmptyId: "dataList", //相当于同时设置了clearId和empty.warpId; 简化写法;默认null; 注意vue中不能配置此项
            toTop: { //配置回到顶部按钮
                src: "/js/videolist/dist/res/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100
            },
            lazyLoad: {
                use: true // 是否开启懒加载,默认false
            }
        }
    });

// 市县选择
    $('.video-nav').on('click', 'a', function () {
        var $that = $(this);
        wdata.cityID = $that.attr('data-cid');
        $that.addClass('on').siblings().removeClass('on');

        //重置列表数据
        mescroll.resetUpScroll();
        //隐藏回到顶部按钮
        mescroll.hideTopBtn();

    })

    $('.video-nav a').eq(0).click();


    /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
    function getListData(page) {
        //联网加载数据
        // getListDataFromNet(pdType, page.num, page.size, function(curPageData){
        getListDataFromNet(wdata.cityID, page.num, page.size, function (curPageData) {

            //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
            //必传参数(当前页的数据个数, 总数据量)
            mescroll.endBySize(curPageData.length, totalSize);

            //设置列表数据
            setListData(curPageData, page.num);
        }, function () {
            //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
            mescroll.endErr();
        });
    }

    /*设置列表数据*/
    function setListData(curPageData, page) {
        var listDom = document.getElementById("dataList");
        for (var i = 0; i < curPageData.length; i++) {

            var pd = curPageData[i];
            var str = '<a href="/video/videodetails/' + pd.id + '">';
            str += '<div class="video-list-img">';
            str += '<img src="' + pd.thumb + '" alt="">';
            str += '</div>';
            str += '<div class="video-list-font">';
            str += '<p class="video-list-title">' + pd.name.substring(0, 18) + '</p>';
            str += '<p class="video-list-label">';
            // str +='<span>'+(pd.plays*1 + 1000)+'播放</span>';
            // str +='<span data-id="1" data-type="1" class="like">'+(pd.thumbs_up*1 + 500)+'点赞</span>'; // 这里需要判断 type 值 添加 oin
            str += '</p>';
            str += '</div>';
            str += '</a>';

            var liDom = document.createElement("li");
            liDom.innerHTML = str;
            listDom.appendChild(liDom);
        }
    }


    /*联网加载列表数据
 在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
 * */
    function getListDataFromNet(cityId, pageNum, pageSize, successCallback, errorCallback) {
        //延时一秒,模拟联网
        setTimeout(function () {
            $.ajax({
                type: 'get',
                url: '/video/getvideo',
                // url: '../res/pdlist1.json?pdType='+pdType+'&num='+pageNum+'&size='+pageSize,
                data: {city: wdata.cityID, page: pageNum, limit: pageSize},
                dataType: 'json',
                success: function (data) {
                    var listData = [];
                    totalSize = data.count;      //总条数

                    $.each(data.data, function (k, v) {
                        listData.push(v);
                    })
                    //回调
                    successCallback(listData);
                },
                error: errorCallback
            });
        }, 1000)
    }


// // 点赞特效 提交 id 及 1 代表点赞，2 代表取消
// var objo = new Object();
// $('#dataList').on('click','.like',function(){
//     var that = $(this);
//     if(that.hasClass('oin')){
//         that.removeClass('oin')
//     }else {
//         that.addClass('oin');
//     }
//     objo.id = that.attr('data-id')
//     objo.type = that.attr('data-type')

//     cityAjax(); // 提交点赞数据 
// })


// // 提交点赞数据 
// function cityAjax(){
//     $.ajax({
//         url:'/js/videolist/index.json',
//         dataType:"json",
//         type:'POST',
//         data:{id:objo.id,type:objo.type},
//         success:function(data){
//             if(data.code == 200){
//                console.log("提交成功！")
//             }
//         }
//     });
// }


// 视频搜索功能
    $('.seek-btn').on('click', function () {
        var txt = $('.seek-txt').val();
        var li = '';
        $.ajax({
            type: 'post',
            url: '/video/search',
            data: {text: txt},
            dataType: 'json',
            success: function (data) {
                $.each(data.data, function (k, v) {
                    li += '<li>';
                    li += '<a href="/video/videodetails/' + v.id + '">';
                    li += '<div class="video-list-img">';
                    li += '<img src="' + v.thumb + '" alt="">';
                    li += '</div>';
                    li += '<div class="video-list-font">';
                    li += '<p class="video-list-title">' + v.name.substring(0, 18) + '</p>';
                    li += '<p class="video-list-label">';
                    // li += '<span>' + (v.plays * 1 + 1000) + '播放</span>';
                    // li += '<span data-id="1" data-type="1" class="like">' + (v.thumbs_up * 1 + 500) + '点赞</span>'; // 这里需要判断 type 值 添加 oin
                    li += '</p>';
                    li += '</div>';
                    li += '</a>';
                    li += '</li>';
                })
                $('#dataList').html('');
                $('#dataList').append(li);
            }
        });
    })

})