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

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

<input type="text" class="search-txt fr" id="txt" placeholder="" />
<button class="search-btn fr"></button>
<section class="num-bar">
    <div class="fl">搜索到<span id="num"></span>个作品著作</div>
    <div class="fr">第<span id="currentPage"></span>/<span id="totalPage"></span>页</div>
</section>
<section class="list-container">
    <article id="app" class="list-content" v-cloak v-for="i in result" name={{i.crwId}}>
	<p class="info-title">{{i.workTitle}}</p>
	<p class="info-p">类型：{{i.workType|workType}}</p>
	<p class="info-no">申请号：{{i.regNo}}</p>
	<p class="info-date">登记日期：{{i.createOn}}</p>
	<p class="info-date">完成日期：{{i.finishDate}}</p>
        <!-- <label v-if="i.caseStaffId!=""&&i.caseStaffId != null">期限：<em class="days_mark">{{i.caseStaffId}}</em>天提醒</label>
        <label v-else>期限：暂无期限信息</label>   -->
     <label  v-show="i.caseStaffId != ""&&i.caseStaffId != null">期限：<em class="days_mark">{{i.caseStaffId}}</em>天提醒</label>
     <label  v-show="i.caseStaffId == ""||i.caseStaffId == null">暂无期限信息</label> 
    </article>
</section>
<div id="msg" class="trade_content"></div>
<div id="dropload-load" 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() {
	window.onscroll = function () { 
		if (getScrollTop()+ getClientHeight() == getScrollHeight()&& $(".noCT").length==0) { 
			pageNum = pageNum+1;
			loadData();
		} 
	}
});
//------上拉加载数据------end-----

//初始化加载数据

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

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

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

//加载msg提示的时候 如果没有有下一页在msg添加一个class<noCT> 这样在监听滚动条的时候判断$(".noCT").length==0即可
function addMsg(e){
    if(!e.success){
        var label = $("<label>查询异常！</label>");
        $("#msg").html(label);
        $("#msg").html(label).addClass("noCT");
        $("#num").html("0");
        $("#currentPage").html("1");
        $("#totalPage").html("1");
    }else{
        $("#num").html(e.total);
        $("#currentPage").html(e.pageNum);
        $("#totalPage").html(e.totalPages);
        if(e.total==0){
            $("#currentPage").html("1");
            $("#totalPage").html("1");
            var label = $("<label>非常抱歉！没有找到相关搜索结果！</label>").css("marginTop","2.5rem");
            $("#msg").html(label).addClass("noCT");
            return;
        }
        if(e.pageNum == e.totalPages || e.total<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};
    layer.open({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");
        layer.closeAll(); 
    }, "json");
})

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

function vueFilter(){
    Vue.filter("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 (document.documentElement && document.documentElement.scrollTop) {
		scrollTop = document.documentElement.scrollTop;
	} else if (document.body) {
		scrollTop = document.body.scrollTop;
	}
	return scrollTop;
}

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

// 获取文档完整的高度
function getScrollHeight() {
	return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}