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 渲染 + 页面加载的示例就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持脚本之家
来源: http://www.jb51.net/article/134933.htm