UniApp 中,實現上拉加載更多通常需要使用滾動監聽器(scroll-listener)和分頁器(pagination)組件。以下是一個基本的步驟:
1. 首先,在頁面中添加一個滾動監聽器,以便在用戶滾動頁面時觸發加載更多數據。
```
前段時間和同學做php項目的時候用到了list.js ,想想有必要推薦給大家,其實它的工功能挺豐富的,這邊我就介紹一下它的分頁和搜索查詢,想了解更多功能可以訪問官網的demo。
這就是list.js 的官網,我是通過vpn打開的,官網上提供了實例和下載,具體訪問list.com.下面我們通過一個小的demo來演示一下。
這是前端代碼塊,需要注意的是上面用紅色標注的地方是固定的類,id除外,且div嵌套的格式也要正確。
這是js代碼塊,可以看到首先實例化一個List對象,傳入兩個參數,前面的是id,后面的是一個對象,里面有三個屬性(key-value),valueNames的值是一個數組,里面傳入的是你要實現搜索數據的class名稱,可以有多個,第二個是page,對應的是你要在一頁顯示的條數,最后一個參數是pagination,true代表開啟分頁功能,false代表關閉分頁功能。
上面可以看到實現了分頁效果,當然下面的1 2 3 ……分頁有點low,你可以通過css自定義樣式讓它變得更好看。
我們在input中輸入lech ,可以看到只查詢到了一條數據,說明實現了搜索功能。其實類似于list.js功能的js插件還有好多,或者大家知道有什么好的js插件,歡迎在下面留言,共同交流,共同進步!
JS代碼: /* * 分頁方法 * author:Mr.X * time:2017/12/27 */ Request = GetRequest(); var searchType = $("#search_type").val(); var key= Request[searchType]; var keyIndex = key.lastIndexOf('.'); if(keyIndex != -1){ key = key.substring(0, keyIndex) } var IFRAME_SRC="http://"+window.location.host+"/search/"+searchType+"/"+key;//初始url var page=Request['p'];//獲取url中的地址參數 if(page==null||page==""){ page=1; } var limit=12;//每頁限制條數 var page_all="";//總頁數 $(document).ready(function (){ page_list(); }); function page_list(){ var count=$("#page_count").html();//新聞總數 var remainder=count%limit;//判斷是否有余數,有余數的話,整除后,余數+1,就是總頁數;如果余數為0,即為整除,則整除后的的數即為總頁數 if(count<=limit){ //總數達不到每頁顯示的條數,則不顯示頁碼 }else{ //總數超過一頁,即總數超過limit規定的條數,顯示分頁 //先判斷余數為0的情況:如果余數為0,即為整除,則整除后的的數即為總頁數 if(remainder==0){ var page_number=count/limit;//總頁碼數 page_number=parseInt(page_number);//將頁碼數由字符串類型轉換為整形 page_all=page_number; //如果頁碼數不超過5,則顯示全部分頁總數 if(page_number<6){ page=parseInt(page);//將獲取到的頁碼數轉換成整數 var page_pre=page-1; var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁 var url_index=IFRAME_SRC+'/p/'+1;//首頁 var url_last=IFRAME_SRC+'/p/'+page_number;//尾頁 if(page==1){ //如果頁碼page=1,則隱藏上一頁 //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>"); }else{ //如果頁碼page不是1,則顯示首頁和上一頁 $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>"); } //對頁碼進行賦值 for(var i=0; i<page_number; i++){ var j=i+1; var url=IFRAME_SRC+'/p/'+j; if(page==j){ //如果是當前頁,則給當前頁加上active $("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); }else{ //如果不是當前頁,則去掉active $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); } } //page=parseInt(page); var page_next=page+1; var url_next=IFRAME_SRC+'/p/'+page_next;//下一頁 if(page==page_number){ //如果是最后一頁,則隱藏下一頁功能 //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>"); }else{ //如果不是最后一頁,則顯示最后一頁和尾頁 $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>"); } } //如果頁碼超過5,則分塊顯示:點擊第一頁,顯示:1/2/3/4/5/..page_number,點擊第二頁,顯示:1/2/3/4/5/..page_number,點擊第三頁,顯示:1/2/3/4/5/..page_number,點擊第四頁:顯示:1/2/3/4/5/..page_number,點擊第五頁,顯示:1...3/4/5/6/7/..page_number;點擊page_number,顯示:1../page_number-4/page_number-3/page_number-2/page_number-1/page_number else{ if(page==1||page==2||page==3||page==4){ page=parseInt(page);//將字符串轉換為整形 var page_pre=page-1; var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁 var url_index=IFRAME_SRC+'/p/'+1;//首頁 var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁 if(page==1){ //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>"); } for(var i=0; i<page_number; i++){ if(i>4){ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>"); break; } var j=i+1; var url=IFRAME_SRC+'/p/'+j; //$(window.parent.document).find("#tab_13 iframe").attr("src",url); //url=$(window.parent.document).find("#tab_13 iframe").attr("src"); if(page==j){ $("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); } } page=parseInt(page); var page_next=page+1; var url_next=IFRAME_SRC+'/p/'+page_next; if(page==page_number){ //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>"); } }else if(page==page_number-3||page==page_number-2||page==page_number-1||page==page_number){ page=parseInt(page);//將字符串轉換為整形 var page_pre=page-1; var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁 var url_index=IFRAME_SRC+'/p/'+1;//首頁 var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁 if(page==1){ //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>"); } $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>"); for(var i=page_number-4; i<page_number+1; i++){ var j=i; var url=IFRAME_SRC+'/p/'+j; if(page==j){ $("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); } } page=parseInt(page); var page_next=page+1; var url_next=IFRAME_SRC+'/p/'+page_next; if(page==page_number){ //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>"); } }else{ page=parseInt(page);//將字符串轉換為整形 var page_pre=page-1; var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁 var url_index=IFRAME_SRC+'/p/'+1;//首頁 var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁 if(page==1){ //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>"); } $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>"); for(var i=page-3; i<page+2; i++){ var j=i+1; var url=IFRAME_SRC+'/p/'+j; if(page==j){ $("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); } } $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>"); page=parseInt(page); var page_next=page+1; var url_next=IFRAME_SRC+'/p/'+page_next; if(page==page_number){ //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>"); } } } $("#page_list").append("<span id='goto-page'>到第</span><input id='selcet_page' value='"+page+"'/><span id='go-page'>頁</span>"); $("#page_list").append("<button type='button' id='change_page'>確定</button>"); } //如果余數不為0,則將整除后的整數+1,即為總頁碼 else{ var page_number=count/limit; page_number=parseInt(page_number); page_number=page_number+1; page_all=page_number; //如果頁碼數不超過5,則顯示全部分頁總數 if(page_number<6){ page=parseInt(page);//將獲取到的頁碼數轉換成整數 var page_pre=page-1; var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁 var url_index=IFRAME_SRC+'/p/'+1;//首頁 var url_last=IFRAME_SRC+'/p/'+page_number;//尾頁 if(page==1){ //如果頁碼page=1,則隱藏上一頁 //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>"); }else{ //如果頁碼page不是1,則顯示首頁和上一頁 $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>"); } //對頁碼進行賦值 for(var i=0; i<page_number; i++){ var j=i+1; var url=IFRAME_SRC+'/p/'+j; if(page==j){ //如果是當前頁,則給當前頁加上active $("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); }else{ //如果不是當前頁,則去掉active $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); } } //page=parseInt(page); var page_next=page+1; var url_next=IFRAME_SRC+'/p/'+page_next;//下一頁 if(page==page_number){ //如果是最后一頁,則隱藏下一頁功能 //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>"); }else{ //如果不是最后一頁,則顯示最后一頁和尾頁 $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>"); } } //如果頁碼超過5,則分塊顯示:點擊第一頁,顯示:1/2/3/4/5/..page_number,點擊第二頁,顯示:1/2/3/4/5/..page_number,點擊第三頁,顯示:1/2/3/4/5/..page_number,點擊第四頁:顯示:1/2/3/4/5/..page_number,點擊第五頁,顯示:1...3/4/5/6/7/..page_number;點擊page_number,顯示:1../page_number-4/page_number-3/page_number-2/page_number-1/page_number else{ if(page==1||page==2||page==3||page==4){ page=parseInt(page);//將字符串轉換為整形 var page_pre=page-1; var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁 var url_index=IFRAME_SRC+'/p/'+1;//首頁 var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁 if(page==1){ //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>"); } for(var i=0; i<page_number; i++){ if(i>4){ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>"); break; } var j=i+1; var url=IFRAME_SRC+'/p/'+j; if(page==j){ $("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); } } page=parseInt(page); var page_next=page+1; var url_next=IFRAME_SRC+'/p/'+page_next; if(page==page_number){ //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>"); } }else if(page==page_number-3||page==page_number-2||page==page_number-1||page==page_number){ page=parseInt(page);//將字符串轉換為整形 var page_pre=page-1; var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁 var url_index=IFRAME_SRC+'/p/'+1;//首頁 var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁 if(page==1){ //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>"); } $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>"); for(var i=page_number-4; i<page_number+1; i++){ var j=i; var url=IFRAME_SRC+'/p/'+j; if(page==j){ $("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); } } page=parseInt(page); var page_next=page+1; var url_next=IFRAME_SRC+'/p/'+page_next; if(page==page_number){ //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>"); } }else{ page=parseInt(page);//將字符串轉換為整形 var page_pre=page-1; var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁 var url_index=IFRAME_SRC+'/p/'+1;//首頁 var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁 if(page==1){ //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>"); } $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>"); for(var i=page-3; i<page+2; i++){ var j=i+1; var url=IFRAME_SRC+'/p/'+j; if(page==j){ $("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>"); } } $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>"); page=parseInt(page); var page_next=page+1; var url_next=IFRAME_SRC+'/p/'+page_next; if(page==page_number){ //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>"); }else{ $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>"); $("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>"); } } } $("#page_list").append("<span id='goto-page'>到第</span><input id='selcet_page' value='"+page+"'/><span id='go-page'>頁</span>"); $("#page_list").append("<button type='button' id='change_page'>確定</button>"); } } } //跳轉的到某一頁 $(document).on("click","#change_page",function(){ var page_num=$("#selcet_page").val(); page_num=parseInt(page_num);//將字符串轉換為整形 //go_text=page_num; //alert(page_num); if(page_num>page_all){ /*$('.success_message').show(); $("#message_info").html('頁碼超出范圍,請輸入正確頁碼'); */ alert('頁碼超出范圍,請輸入正確頁碼'); return false; } if((/^(\+|-)?\d+$/.test( page_num ))&&page_num>0){ location.href=IFRAME_SRC+"/p/"+page_num; }else{ /* $('.success_message').show(); $("#message_info").html('非法頁碼,請輸入正確頁碼');*/ /*alert('非法頁碼,請輸入正確頁碼');*/ layer.msg("非法頁碼,請重新輸入",{time: 2000}); return false; } //$("#selcet_page").html(go_text); }); //獲取url參數 function GetRequest() { var url = location.href; //獲取整個url var theRequest = new Object(); if (url.indexOf("/") != -1) { var str = url.substr(7); strs = str.split("/"); for(var i = 0; i < strs.length; i ++) { if(i==0){ }else{ theRequest[strs[i]]=decodeURIComponent(strs[i+1]); i=i+1; } } } return theRequest; } //輸入框只能輸入數字 $(function(){ var bind_name = 'input'; if (navigator.userAgent.indexOf("MSIE") != -1) { //ie情況下特殊處理 bind_name = 'propertychange'; } $('#selcet_page').bind(bind_name,function(){ var value = $("#selcet_page").val(); if((/^(\+|-)?\d+$/.test( value ))&&value>0&&value<(page_all+1)) { } else{ $("#selcet_page").val(""); return false; } }); })HTML代碼:<section class="page mt30 mb30">{php}if(isset($count)){{/php}<div id="page_count" style="display:none;">{$count}</div> <div class="dataTables_paginate paging_simple_numbers col-xs-12 marbtm10" id="example_paginate"> <ul class="pagination" id="page_list"> </ul> </div>{php}}{/php}</section>CSS代碼:#example_paginate{display: inline-block}.pagination>li{ display: inline-block;margin-right: 10px;padding: 5px 10px;cursor: pointer}.pagination>li>a{color: #fff}.pagination>li.active,.pagination>li:hover,#example_next:hover,#example_previous:hover{ background: #fdc74a;}#change_page:hover{background-color:#f26c1d;cursor: pointer}#selcet_page{ background: #fff;padding: 4px 10px;width: 4em;text-align: center;}#example_next,#example_previous{background: #fff}#example_next>a,#example_previous>a{color: #ff9530}#example_next:hover>a,#change_page:hover>a{color: #fff}#change_page{ background-color: #fdc74a;padding: 4px 10px;color: #fff;height: 29px;display: inline-block;margin-left: 10px;}#goto-page{padding-right: 5px;color: #fff;}#go-page{padding-left: 5px;color: #fff;}.shownum{color: #fff;margin-right: 20px;}.shownum>a{padding: 4px 10px;margin-right: 5px}
*請認真填寫需求信息,我們會在24小時內與您取得聯系。