1. 程式人生 > >微擎之手機頁面向下滑動載入更多

微擎之手機頁面向下滑動載入更多

1HTML

         <ul id="toplist">
    {loop $list $row}


            <li >
                 <a onclick="view({$row['rid']},{$row['id']})">

                    <div style="width:25%;"><i class="two"><span class="pull-left pos">{php echo ++$pxid;}</span></i
>
</div> <div style="width:15%;">{$row['id']}</div> <div style="width:45%;">{$row['nickname']}</div> <div style="width:15%;">{$row['num']}</div> </a> </li> {/loop} </ul
>
<div id="loadtop" ><i class="fa fa-spinner fa-spin"></i>正在載入更多</div>

2.載入更多Js

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript">
    var load_flag=false;
    var page={$page};
      $(function
(){
$(window).scroll(function(){ if(load_flag){ return; } var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if(totalheight>=$(document).height()){ $("#loadtop").show(); load_flag=true; loadTop(); } }); }); function loadTop(){ $.ajax({ url:"{php echo $this->createMobileUrl('Index',array('op'=>'loadtop'))}", type:'post', data:"page="+page+"&id="+{$id}, dataType:'json', success:function(data){ var html=""; if(data.length>=10){ load_flag=false; }else{ load_flag=true; $(window).scroll = null; $("#loadtop").html("已載入完全部"); } for(var i=0;i<data.length;i++){ var item=data[i]; var tppp=page+i+1; html+='<li><a onclick="view('+item.rid+','+item.id+')"><div style="width:25%;"><i class="two"><span class="pull-left pos">'+tppp+'</span></i></div><div style="width:15%;">'+item.id+'</div><div style="width:45%;">'+item.nickname+'</div><div style="width:15%;">'+item.num+'</div></a></li>'; } $("#toplist").append(html); page=page+10; } }); } function view(id,uid){ location.href="{php echo $this->createMobileUrl('Index',array('op'=>'detail'))}&id="+id+"&uid="+uid; }
</script>

3.PHP端處理程式碼

if($op=='loadtop'){
      $id=$_GPC['id'];
       $activty=pdo_fetch("SELECT * FROM ".tablename('lb_vote')." WHERE   id=:id and  uniacid=:uniacid ", array(':uniacid'=>$_W['uniacid'],':id'=>$id));
      /*獲取活動設定預設首頁顯示幾個使用者*/
     $page=$_GPC['page']?intval($_GPC['page']):0;
     $list=pdo_fetchall("SELECT * FROM ".tablename('lb_vote_info')." WHERE   rid=:rid and  uniacid=:uniacid and  pass=:pass order by num desc limit ".$page.",10", array(':uniacid'=>$_W['uniacid'],':rid'=>$id,':pass'=>1));
    echo json_encode($list);
}

相關推薦

手機頁面滑動載入

1HTML <ul id="toplist"> {loop $list $row} <li >

頁面滑動實現div顯示和隱藏

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jque

用html5頁面引入了一個jquery外掛,實現平板上的向上滑動載入的功能

這個跟滾動是一樣的道理 參考下這個<!DOCTYPE=html>  <html>  <head>  <script src="js/jquery.js" type="text/javascript"></script&g

【小程式】分頁載入資料,載入,上拉重新整理

【 小程式】分頁載入資料,下拉載入更多,上拉重新整理 分頁載入的優點就不多說了,下面主要記錄一下幾個問題點。 scroll-view元件不能用在頁面根佈局中,不然觸發不了系統的onPullDownRefresh()、onReachBottom()回撥。 在Page頁

基於React Native官方元件FlatList,增加可定製化“拉重新整理”、“載入”元件API的新列表元件react-native-refresh-loadmore-flatlist

react-native-refresh-loadmore-flatlist 基於React Native官方元件FlatList,增加可定製化“下拉重新整理”、“下拉載入更多”元件API的新列表元件,具體實現功能如下: 自定義下拉重新整理元件API 自定義上拉Lo

js載入

<!DOCTYPE=html> <html> <head> <script type="text/javascript" src="1/js/jquery-2.1.0.min.js" ></script> </head

vue - 載入

上拉重新整理下拉載入更多 vue好多外掛可以使用,完成該功能,但是我使用過幾個外掛之後,不知道是不是自己沒有找對方法,都沒有解決我得問題 我出現得情況是,下拉時請求下一頁得資料,但是如果資料條數過多,比如一頁請求10條資料,螢幕太短只能顯示5條資料,那麼再次下拉就不是請求資料,而是想看下面內

Swiper實現上拉重新整理和載入(學習筆記④)

簡單粗暴的放碼 一個簡單的效果 分頁器效果中加下拉重新整理和上拉載入功能 HTML結構: <div class="a">標題</div> <div class="tab"> <a class="active" href="j

Android橫向滑動載入的控制元件的實現---HorizontalScrollSlideView

Android橫向滑動載入更多的控制元件的實現—HorizontalScrollSlideView 需求 之前公司業務要求做一個橫向滑動的,可以載入更多的控制元件,第一時間想到的就是 RecyclerView 來實現 ,後面仔細想想滑動攔截不好控制等等

jQuery+Asp.net 實現簡單的載入功能

原來做過的商城專案現在需要增加下拉載入的功能,簡單的實現了一下。大概可以整理一下思路跟程式碼。 把需要下拉載入的內容進行轉為JSON處理存在當前頁面: <script type="text/javascript">var objson = eval([{"Id":"5991","produ

AMAZEUIiscroll 下滑重新整理/上拉載入例項

 最新在做一個微信商城有用到商鋪列表展示,需要使用滑動上拉載入資料,就使用了iscroll,中間遇到很多坑,這裡使用iscroll做一個簡單的例子,希望能幫助到一些同學。 1.首先進入amazui官網下載amaui的zar包,解壓到專案中 2.新建case.html <

載入DEMO(js實現)

專案的一個前端頁面展示已購買商品時,要求能下拉載入更多。花了點時間研究這個功能,以前沒做過。     首先需要給div加scroll事件,監聽滾動條滾動動作。那何時觸發載入動作呢?當滾動條滾到底的時候。如何判斷滾動條滾到底呢?     當滾動條的高度加上滾動條到div

xamarin ios pullRefresh 拉重新整理,載入

如果用tableviewcontroller 下拉重新整理會自帶,而且tableview 會自動適應螢幕。這樣做的話這個介面的內容就要完全用cell承載了。 tableview pullRefresh 主要就是需要需要做下拉載入更多,這種需求,本人曾用兩種的辦法解決。題外

PullToRefresh上拉重新整理載入的使用

效果圖1、新增 Gradle 依賴目前只支援 Android Studiocompile 'com.jwenfeng.pulltorefresh:library:1.2.7'2、佈局檔案注意:內容控制元件 有且只能有一個,目前支援:ScrollView,ListView,We

文件dropload.js外掛實現webApp網頁上滑重新整理載入

文件說明 需要引入的檔案 <script src="js/zepto.min.js"></script> <script src="js/dist/dropload.

使用vue.js 在移動端簡單實現的載入 和一些常用的js/jq操作和vueFilter,v-if和v-show運用

/**需要引入的js與css檔案*/ <script src="${root}/js/jquery.min.js"></script> <script src="${root}/js/vue.min.js"></script>

jsp載入資料

function bindScrollEvent(){ //新增滾動監聽事件 $(window).scroll(function(){ var docHeight = $(document).hei

appium+ios 指定頁面右向上滑動多少:mobile:dragFromToForDuration

使用 WebDriverAgent/XCTest Backend 進行iOS自動化手勢操作 很可惜,蘋果官方的 XCTest 框架本身並不支援 TouchAction 介面實現的 W3C 標準。儘管如此,XCTest 提供了非常豐富的手勢操作,這些操作都是 iOS 平

解決ios手機頁面overflow scroll滑動很卡的問題

沒有 repo 發現 container rep jpg bug head 上下 解決ios手機頁面overflow scroll滑動很卡的問題 今天在IOS系統上測試 webAPPApp的時候發現使用了position:fixed/absolute時,DIV

簡單實現Activity退出時滑動退出的效果

先放圖(順便吐槽一下,ubuntu下想錄制gif還真是麻煩......)