使用 在移动端简单实现的下拉加载更多 和一些常用的js/jq操作和vueFilter,v-if和v-show运用

/**需要引入的js与css文件*/
<script src="${root}/js/"></script>
<script src="${root}/js/"></script>
<script src="${root}/js/"></script>
<script src="${root}/js/"></script>
<link rel="stylesheet" href="${root}/css/">
<link rel="stylesheet" href="${root}/css/">

<input type="text" class="search-txt fr"  placeholder="" />
<button class="search-btn fr"></button>
<section class="num-bar">
    <div class="fl">搜索到<span ></span>个作品著作</div>
    <div class="fr">第<span ></span>/<span ></span>页</div>
</section>
<section class="list-container">
    <article  class="list-content" v-cloak v-for="i in result" name={{}}>
	<p class="info-title">{{}}</p>
	<p class="info-p">类型：{{|workType}}</p>
	<p class="info-no">申请号：{{}}</p>
	<p class="info-date">登记日期：{{}}</p>
	<p class="info-date">完成日期：{{}}</p>
        <!-- <label v-if="!=''&& != null">期限：<em class="days_mark">{{}}</em>天提醒</label>
        <label v-else>期限：暂无期限信息</label>   -->
     <label  v-show=" != ''&& != null">期限：<em class="days_mark">{{}}</em>天提醒</label>
     <label  v-show=" == ''|| == null">暂无期限信息</label> 
    </article>
</section>
<div  class="trade_content"></div>
<div  class="dropload-load" style="display: none;position: fixed;bottom: 0px;width: 100%;-moz-opacity:0.6;filter:alpha(opacity=80);opacity:0.6;background: black;">
   <span class="loading"></span>加载中...
</div>

定义全局变量
var vue=null;
var pageNum=1;
var pageSize=10;
var actionUrl="${root}/wechat/ips/copyright/"+pageSize+"/"+pageNum+".json";

//------上拉加载数据------Start-----
$(function() {
	 = function () { 
		if (getScrollTop()+ getClientHeight() == getScrollHeight()&& $(".noCT").length==0) { 
			pageNum = pageNum+1;
			loadData();
		} 
	}
});
//------上拉加载数据------end-----

//初始化加载数据

$(function(){
    var data = {workTitle : null,};
    ({type: 2,style: 'color:#ccc; border:none;'});
    $.post(actionUrl, data, function(e) {
        successinfo(e,false);
        $(".dropload-load").css('display','none');
        (); 
    }, "json");
    
    toDetail();     //进入详情页
    VueFilter();
})

function loadData(){
    var data = {workTitle : $("#txt").val()};
    ({type: 2,style: 'color:#ccc; border:none;'});
    $.post(actionUrl, data, function(e) {
        successinfo(e,true);
        $(".dropload-load").css('display','none');
        (); 
    }, "json");
}

//successType true为加载叠加数据<用于加载下一页> false为更新替换数据<用于重新搜索> 
function successinfo(e,successType){
        var result_all=;    
        //alert((result_all[0]))
        if(vue == null) {
            vue = new Vue({
                el: "#app",
                data: {
                    result: result_all
                }
            });
        } else {
            if(successType){
                vue._data.result = vue._data.(result_all);
            }else{
                vue._data.result = result_all;
            }
        }
        addMsg(e);
}

//加载msg提示的时候 如果没有有下一页在msg添加一个class<noCT> 这样在监听滚动条的时候判断$(".noCT").length==0即可
function addMsg(e){
    if(!){
        var label = $("<label>查询异常！</label>");
        $("#msg").html(label);
        $("#msg").html(label).addClass("noCT");
        $("#num").html("0");
        $("#currentPage").html("1");
        $("#totalPage").html("1");
    }else{
        $("#num").html();
        $("#currentPage").html();
        $("#totalPage").html();
        if(==0){
            $("#currentPage").html("1");
            $("#totalPage").html("1");
            var label = $("<label>非常抱歉！没有找到相关搜索结果！</label>").css('marginTop','2.5rem');
            $("#msg").html(label).addClass("noCT");
            return;
        }
        if( ==  || <11){
            var label = $("<label>暂无更多内容</label>");
            $("#msg").html(label);
            $("#msg").html(label).addClass("noCT");
        } else{
            var a = $("<a></a>");
            //$(a).html("加载更多内容");
            $("#msg").html(a);
            $("#msg").html(a).removeClass("noCT");
        }
    }
}

//重新搜索的时候 pageNum要重置为1
$('.search-btn').click(function(){
    pageNum=1;
    var txt=$("#txt").val();
    var data={workTitle : txt};
    ({type: 2,style: 'color:#ccc; border:none;'});
    actionUrl="${root}/wechat/ips/copyright/10/"+pageNum+".json";
    $.post(actionUrl, data, function(e) {
        successinfo(e,false);
        $(".dropload-load").css('display','none');
        (); 
    }, "json");
})

function toDetail(){
    $('body').on("click", "#app", function(e) {
        var id = $(this).attr("name");
         = "${root}/wechat/ips/details/?crwId="+id;
    })
}

function vueFilter(){
    ("workType", function(str) {
        if(str==null || str==undefined||str==""){
            return "暂无信息";            
        }else{
            if(str == "RPOE-10253-101") {
                return str = "文字作品";
            }else if(str == "RPOE-10253-102") {
                return str = "口述作品";
            }else {
                return str = "其他作品";
            }
        }
    });
}

function getScrollTop() {
	var scrollTop = 0;
	if ( && ) {
		scrollTop = ;
	} else if () {
		scrollTop = ;
	}
	return scrollTop;
}

// 获取当前可是范围的高度
function getClientHeight() {
	var clientHeight = 0;
	if ( && ) {
		clientHeight = (,
				);
	} else {
		clientHeight = (,
				);
	}
	return clientHeight;
}

// 获取文档完整的高度
function getScrollHeight() {
	return (,);
}