jquery实现下拉加载功能

<script>
var str = ‘‘;
if(page=="") page=1;
var stop=true;//触发开关,防止多次调用事件
$(window).scroll( function(event){
//当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载.
if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(this).scrollTop() > 10) {

//if(stop==true){
//stop=false;
//var canshu="page/"+page+";
var url = "";
var parm = {‘page‘:page};
page=page+1;//当前要加载的页码
//加载提示信息
$("#showlists").append("<li class=‘ajaxtips‘><div style=‘font-size:2em‘>Loding…..</div><>");
$.post(url,parm,function(data){
if( data.count == 0 ) {
$(‘.prolist-abtn‘).html(‘已全部加载完‘);
return;
}
$.each(eval(data), function(data, val) {
var url1 = "";
$(".ajaxtips").hide();
str = ‘<div class="content" id="showdiv">‘;
str +=‘<div class="cont clearfix">‘;
str +=‘<a href="url"><div class="cont_img fl">‘;
str +=‘<img src=‘+val.imgurl+‘ /></div>‘;
str += ‘<div class="cont_list fl"><p>‘+val.sceneryname+‘</p><ul class="cont_list fl">‘;
str += ‘<li class="cont_list2"><span>¥</span>‘;
str +=‘<strong>‘+val.sellerprice+‘</strong>起<i>¥‘+val.sellerprice+‘</i></li>‘;
str +=‘</ul></div></a></div></div>‘;
$("#showdiv").append(str);//把新的内容加载到内容的后面
});
stop=true;
},‘JSON‘)
}
});

</script>

时间: 2024-08-11 01:36:05

jquery实现下拉加载功能的相关文章

PullToRefreshRecyclerView——带上拉刷新下拉加载功能的RecyclerView

PullToRefreshRecyclerView——带上拉刷新下拉加载功能的RecyclerView

jQuery 滚动条下拉加载内容

现在很多网站为了更好的用户体验,那么就会预先加载一部分内容,等到滚动条下拉到底部的时候,然后使用 ajax或其它技术,请求更多的内容,这样会使网页的用户体验会更好些,那么这个是怎么样做到的呢?现在就在这里提供一种思路出来... $(function(){ //思路是:如果内容区域 小于等于 可视区高度加滚动条的高度的话那么就进行加载... $(window).scroll(function(){ // document 文档高度 var docHeight = $(document).heigh

Android中listView的下拉加载功能实现

今天给大家讲讲android开发中比较常见的listView的下拉加载,其实也可以叫做分页加载.为什么会有这个叫法呢?说说我的理解吧! 从字面上很好理解.当你滑动一个列表到底部的时候,这个时候就会出现正在加载的底部加载布局去加载更多的数据.这里拿微信作为一个例子,如下图所示: 如上图所示红色方框的部分就是底部的加载布局.从一定程度上这样做是必要的,为了优化用户的体验.你可以想想,假如你点开微信的朋友圈的时候,如果没有做分页加载,那么你需要等待很久的时间才能够看到你和朋友发的一些状态.这是因为这个

jQuery实现下拉加载更多

<!DOCTYPE=html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js&

下拉刷新,上拉加载功能--dropload.js的使用

这段时间工作太忙了,没时间更新博客内容,在这段时间,也学习到了不少新的知识.今天先整理一下dropload.js的使用方法吧,这个是在为项目中使用过的插件,很好用,但是真正用到项目中还是会有一些小小的问题,这个要具体问题具体分析了. 插件下载地址:https://github.com/ximan/dropload.大家也可以直接看源码        我的代码地址: https://github.com/dreamITGirl/projectStudy,大家可以在里面查找. 首先,这个插件是依赖于

vue之better-scroll的封装,包含下拉刷新,上拉加载功能及UI(核心为借鉴,我仅仅是给轮子套上了外胎...)

先发原文作者.地址等信息.我把内容全部搬过来了,也可以去看原文.内容绝对是满满的干货,给原作者点赞!(我添加的内容在转载过来的后面,内容不多) 作者: ustbhuangyi 链接:http://www.imooc.com/article/18232 来源:慕课网 在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开"微信 -> 钱包->滴滴出行"体验效果. 我们在实

mui 框架中结合mui.ajax实现 下拉刷新和上拉加载功能

实现方式与之前写的jquery weui 下拉刷新和上拉加载功能有点相似,以下是实现过程! 后台返回的数据格式: 页面代码布局: <header id="header" class="mui-bar mui-bar-nav"> <h1 class="mui-title">订单列表</h1> <a class="mui-icon mui-pull-right iconfont icon-tuich

使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能

package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import android.support.v4.widget.SwipeRefreshLayout; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.View;

JQuery实现无刷新下拉加载图片

      最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQuery写下拉触发ajax事件 $(window).scroll(function () { if($(window).scrollTop()==($(document).height()-$(window).height()))//判断右边滑动条是否滑到最下 { $.ajax({ url:"&quo