suchen

Heim >Web-Frontend >js-Tutorial >Detailliertes Beispiel für den Kapselungsprozess von Mui-Pull-Up zum Laden weiterer Pull-Down-Aktualisierungsdaten

Detailliertes Beispiel für den Kapselungsprozess von Mui-Pull-Up zum Laden weiterer Pull-Down-Aktualisierungsdaten

小云云
小云云Original
2017-12-28 10:25:094321Durchsuche

In diesem Artikel wird hauptsächlich der Kapselungsprozess des Mui-Pull-Up-Ladens erläutert, um mehr Pull-Down-Aktualisierungsdaten zu laden. Mui-Pull-Up-Laden und Pull-Down-Aktualisierung sind ähnlich und gehören zum PullRefresh-Plug-In. Freunde in Not können darauf verweisen, ich hoffe, es kann allen helfen.

Ich habe Mui verwendet, um zwei Projekte zu erstellen, und habe dann nach unten gezogen, um die Daten zu aktualisieren. Ich hoffe, dass es Freunden in Not helfen kann 🎜>

Demo-Projekt Die Struktur von

wird direkt in den Code

index.html

mui-Pullup eingefügt , Aktualisieren, Herunterziehen und Laden sind alle hier, es können zwei Methoden durchgeführt werden 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <title>mui上拉刷新下拉加载demo--封装</title>
 <script src="js/mui.min.js"></script>
 <link href="css/mui.min.css" rel="external nofollow" rel="stylesheet"/>
 <style type="text/css">
 li{
  height: 30px;
 line-height: 30px;
  font-size: 14px;
  color: #bbb;
  text-indent: 4%;
  border-bottom: 1px solid currentColor;
 }
 </style>
</head>
<body>
 <!--下拉刷新容器-->
 <p id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <p class="mui-scroll">
  <!--数据列表-->
  <ul class="mui-table-view mui-table-view-chevron" id="list">
  </ul>
  </p>
 </p>
</body>
<script type="text/javascript" charset="utf-8">
 var pager = {};//分页
 var totalPage;//总页码
 pullRefresh(pager);//启用上拉下拉 
 function pullRefresh(){
  mui("#refreshContainer").pullRefresh({
  up:{
   contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
    contentnomore:'没 有 更 多 数 据 了',//可选，请求完毕若没有更多数据时显示的提醒内容；
   callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
     window.setTimeout(function(){
    getData(pager);
    },500);
   }
   },
   down : {
    height:50,//可选,默认50.触发下拉刷新拖动距离,
    auto: true,//可选,默认false.首次加载自动下拉刷新一次
    contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
    contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
    contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
    callback :function(){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
    window.setTimeout(function(){
     pager['size']= 3;//条数
    pager['page'] = 1;//页码  
    //刷新要先清空父节点里面的子节点
    var f = document.getElementById("list");
    var childs = f.childNodes;
    for(var i = childs.length - 1; i >= 0; i--) {
     f.removeChild(childs[i]);
    }
    getData(pager);
    },500);
    }
   }
  })
 }
 //这个方法是负责向接口请求数据的，你可以选择你喜欢的方式，我这里是直接用的mui.ajax
 function getData(params){
  mui.ajax("/article/getArticlePage",{
   data:{
   "header":{"os":"wap","app":"xxxx","ver":1.0},
   "data":params
   },
   dataType:'json',
   type:'post',
   headers:{'Content-Type':'application/json'},
   success:function(data){
     mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
    //下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
    var returnData = data.data;
    var element=document.getElementById("list");
    var para;
   　　　var node;
    for(var i = 0; i<returnData.length;i++){
    para = document.createElement("li");
    node = document.createTextNode(returnData[i].article_title)
    para.appendChild(node);
    element.appendChild(para);
    }
    //这里很重要，这里获取页码 公式：总条数/每页显示条数
    totalPage = data.ext%pager.size!=0?
    parseInt(data.ext/pager.size)+1:
    data.ext/pager.size;
    if(totalPage==pager.page){//总页码等于当前页码，停止上拉下拉
    mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
    }else{
   pager.page++;
   mui('#refreshContainer').pullRefresh().refresh(true);
    }   
   },
   error:function(xhr,type,errorThrown){
   //异常处理；
   console.log(type);
   }
   })
  } 
</script>
</html>
Der Code wurde gerade veröffentlicht, sieht aber nicht sehr gut aus

Das Folgende ist das Rendering . Ich wollte ein Video machen, fand es aber zu nutzlos, um es zu machen

PS: Lass mich mit dir teilen Beispielcode: MUI-Pulldown zum Laden weiterer Daten. Hinweise

HTML-Code

<p id="pullrefresh" class="mui-content mui-scroll-wrapper"> 
    <p id="mui-scroll" class="mui-scroll"> 
      <ul id="refresh-ul" class="mui-table-view"> 
        <!-- 内容 --> 
      </ul> 
    </p> 
  </p> 
<script type="text/javascript"> 
mui('body').on('tap','a',function(){document.location.href=this.href;});//监听让页面A标签的超链接 是有效状态 
mui.init({ 
   pullRefresh : { 
    container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等 
    up : { 
     height:50,//可选,默认50.触发下拉刷新拖动距离, 
     auto: true,//可选,默认false.自动下拉刷新一次 
     contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容 
     contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容 
     contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容 
     callback :function(){ 
      //业务逻辑代码，比如通过ajax从服务器获取新数据； 
        //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后 
         //mui('#refresh-ul').pullRefresh().endPullupToRefresh(); //refresh completed  
          var pagecount=$("#pagecount").val(); 
          var page=$("#page").val(); 
          pagecount=parseInt(pagecount); 
          page=parseInt(page); 
          page+=1; 
          $.ajax({ 
            url:"/mobile/seckill/order/order_refresh_ajax.jhtml", 
            type: 'post', 
            datatype:'html', 
            data: {'pagecount': pagecount,'page':page}, 
            async: false,//false代表只有在等待ajax执行完毕后才执行 
            success: function(data,msg){ 
              $("#refresh-ul").append(data); 
              $("#page").val(page); 
            }, 
            error: function(data,msg){ 
              alert("error"); 
            } 
            }); 
        this.endPullupToRefresh(false); 
     } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； 
    } 
   } 
  }); 
if(mui.os.plus) { 
  mui.plusReady(function() { 
    setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 1000); 
  }); 
} else { 
  mui.ready(function() {  
    mui('#pullrefresh').pullRefresh().pullupLoading();  
  }); 
} 
function goShoppingCart() { 
  window.location.href = "/mobile/seckill/shoppingcart.jhtml"; 
} 
</script>
Verwandte Empfehlungen:

PHP-Funktionspaket mit Kommas für jeweils drei Ziffern

Über Ajax-Sekundärverpackungs-JQuery

Einführung in drei Methoden der JavaScript-Simulation zur Erzielung einer Kapselung und ihre Unterschiede

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für den Kapselungsprozess von Mui-Pull-Up zum Laden weiterer Pull-Down-Aktualisierungsdaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiele zum Teilen von Erfahrungen mit der Verwendung des UI-Kalenders in AngularNächster Artikel：Beispiele zum Teilen von Erfahrungen mit der Verwendung des UI-Kalenders in Angular

In Verbindung stehende Artikel

Mehr sehen