微擎之手機頁面向下滑動載入更多
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
AMAZEUI之iscroll 下滑重新整理/上拉載入更多例項
最新在做一個微信商城有用到商鋪列表展示,需要使用滑動上拉載入資料,就使用了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還真是麻煩......)