1.导入js
<script type=\"text/javascript\" src=\"<c:url value=\"/resources/lib/jquery/jquery-1.11.0.min.js\" />\"></script> <!--标准mui.css--> <link href=\"<c:url value=\" rel=\"external nofollow\" rel=\"external nofollow\" /resources/mui/css/mui.min.css\" />\" rel=\"stylesheet\"> <!--App自定义的css--> <link href=\"<c:url value=\" rel=\"external nofollow\" rel=\"external nofollow\" /resources/mui/css/app.css\" />\" rel=\"stylesheet\"> <script src=\"<c:url value=\"/resources/vue/vue.js\"/>\"></script>
2.body主体
<body>
<div class=\"main\">
<header class=\"mui-bar mui-bar-nav\">
<a class=\"mui-action-back mui-icon mui-icon-left-nav mui-pull-left\"></a>
<h1 class=\"mui-title\">订单管理</h1>
</header>
<div class=\"mui-content\">
<div class=\"mui-content-padded\" style=\"margin: 10px;margin-bottom: 0px;\">
<h5>请输入地址：</h5>
<div class=\"mui-input-row mui-search\">
<input type=\"search\" id=\"searchInput\" class=\"mui-input-clear\" placeholder=\"\">
</div>
</div>
<%--<div style=\"margin: 5px;margin-top: 10px;\">
<input type=\"text\" class=\"mui-input-clear\" id=\"searchInput\" placeholder=\"请输入地址\" style=\"width: 78%;float: left;\">
<button type=\"submit\" class=\"mui-btn mui-btn-primary\" style=\"margin-left: 2%;width: 18%;margin-right: 2%;padding: 8.8px 12px;\" onclick=\"submitSearch()\">
搜索
</button>
</div>--%>
<div style=\"margin: 0 auto;clear: both;\"></div>
<ul class=\"mui-table-view mui-table-view-striped mui-table-view-condensed\" id=\"msgUl\">
<li class=\"mui-table-view-cell\" id=\"list\" v-for=\"li in list\" :key=\"li.orderBaseId\">
<div class=\"mui-slider-right mui-disabled\" @click=\"orderDetail(li.orderBaseId)\">
<a class=\"mui-btn mui-btn-grey\"<%-- v-bind:href=\"li\" rel=\"external nofollow\" --%>/>详情</a>
</div>
<div class=\"mui-table mui-slider-handle\" @click=\"skipDetail(li.orderBaseId)\">
<div class=\"mui-table-cell mui-col-xs-10\">
<div class=\"mui-table-cell\">
<h4 style=\"display: inline;float: left;width: 100px;margin-right: 130px;\">姓名：{{li.customerName}}</h4>
</div>
<p class=\"\">地址：{{li.customerAddress}}</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
3.js代码块
<script src=\"<c:url value=\"/resources/mui/js/mui.min.js\"/>\"></script>
<script>
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渲染+页面加载的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容