ajax请求+vue.js渲染+页面加载的示例

var vm = new Vue({
el: '.main',
data: function () {
return {
list: [] }
},
methods: {
skipDetail: function (id) {
window.location.href = '/mobile/admin/orderBase/getOrderBaseEditPage.action?orderBaseId='+id;
},
orderDetail:function (id) {
window.location.href='/mobile/admin/orderDetails/getOrderDetailsListPage.action?orderBaseId='+id;
}
}
});
var indexs=1;
leavePage();
function leavePage(srh) {
if(srh==1){
indexs=1;
$("#msgUl").html("");
}
$.ajax({
url:'<c:url value="/mobile/admin/orderBase/getOrderBaseListJSON.action" />',
async:false,
data:{
customerAddress:$(".mui-input-clear").val(),
page:indexs,
rows:9
},
dataType:'json',//服务器返回json格式数据
contentType: "application/x-www-form-urlencoded; charset=utf-8",
type:'post',//HTTP请求类型
success:function(data){
if(data.rows.length>0){
indexs+=1;
}
console.log(data);
vm.list.push.apply(vm.list,data.rows);
console.log(vm.list)
}
});
}
$(document).ready(function(){
var range = 50; //距下边界长度/单位px
var elemt = 500; //插入元素高度/单位px
var maxnum = 20; //设置加载最多次数
var num = 1;
var totalheight = 0;
var main = $(".mui-content"); //主体元素
$(window).scroll(function(){
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
/* console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
console.log("页面的文档高度 ："+$(document).height());
console.log('浏览器的高度：'+$(window).height());*/
totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
if(($(document).height()-range) <= totalheight && num != maxnum) {
console.log(indexs);
/* indexs+=1;*/
leavePage();
}
});
});

//地址模糊搜索
$("#searchInput").change(function () {
/*alert($(".mui-input-clear").val());*/
leavePage(1);
})
/* function submitSearch() {
leavePage(1);
}*/
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>

以上这篇ajax请求+vue.js渲染+页面加载的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。