前端之家收集整理的这篇文章主要介绍了
ajax请求+vue.js渲染+页面加载的示例，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
1.导入js
">
" rel="stylesheet">
" rel="stylesheet">
@H_
404_36@
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:'
',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 //启用右滑关闭功能
});
