Home > Article > Web Front-end > ajax request + vue.js rendering + page loading

ajax request + vue.js rendering + page loading

亚连Original: 2018-06-06 11:06:272013browse

Below I will share with you an example of ajax request vue.js rendering page loading, which has a good reference value and I hope it will be helpful to everyone.

1.Import 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>
<p 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>
 <p class="mui-content">
  <p class="mui-content-padded" style="margin: 10px;margin-bottom: 0px;">
   <h5>请输入地址：</h5>
   <p class="mui-input-row mui-search">
    <input type="search" id="searchInput" class="mui-input-clear" placeholder="">
   </p>
  </p>
  <%--<p 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>
  </p>--%>
  <p style="margin: 0 auto;clear: both;"></p>
  <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">
    <p 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>
    </p>
    <p class="mui-table mui-slider-handle" @click="skipDetail(li.orderBaseId)">
      <p class="mui-table-cell mui-col-xs-10">
       <p class="mui-table-cell">
        <h4 style="display: inline;float: left;width: 100px;margin-right: 130px;">姓名：{{li.customerName}}</h4>
       </p>
       <p class="">地址：{{li.customerAddress}}</p>
      </p>
    </p>
   </li>
  </ul>
 </p>
</p>
</body>

3.js code block

<script src="<c:url value="/resources/mui/js/mui.min.js"/>"></script>
<script>
 var vm = new Vue({
  el: &#39;.main&#39;,
  data: function () {
   return {
    list: []
   }
  },
  methods: {
   skipDetail: function (id) {
    window.location.href = &#39;/mobile/admin/orderBase/getOrderBaseEditPage.action?orderBaseId=&#39;+id;
   },
   orderDetail:function (id) {
    window.location.href=&#39;/mobile/admin/orderDetails/getOrderDetailsListPage.action?orderBaseId=&#39;+id;
   }
  }
 });
 var indexs=1;
 leavePage();
 function leavePage(srh) {
  if(srh==1){
   indexs=1;
   $("#msgUl").html("");
  }
  $.ajax({
   url:&#39;<c:url value="/mobile/admin/orderBase/getOrderBaseListJSON.action" />&#39;,
   async:false,
   data:{
    customerAddress:$(".mui-input-clear").val(),
    page:indexs,
    rows:9
   },
   dataType:&#39;json&#39;,//服务器返回json格式数据
   contentType: "application/x-www-form-urlencoded; charset=utf-8",
   type:&#39;post&#39;,//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(&#39;浏览器的高度：&#39;+$(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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use template in Vue2 template

##How to create components in Vue

How to use Eslint in Vue-cli to implement automatic formatting

The above is the detailed content of ajax request + vue.js rendering + page loading. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to solve the problem that when Vue.js displays data, the page flashesNext article：How to solve the problem that when Vue.js displays data, the page flashes

See more

ajax request + vue.js rendering + page loading

Related articles