js下拉加载分页

最新推荐文章于 2024-03-29 12:01:07 发布
最新推荐文章于 2024-03-29 12:01:07 发布
阅读量3.4k 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vindraz/article/details/38059029
版权 
<!DOCTYPE=html>  
<html>  
	<head>  
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8;width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0" name="viewport"/>
		<script src="jquery_page.js" type="text/javascript"></script>  
		<script type="text/javascript"> 
			var num=1;
			var more = true;
			$(window).scroll(function()
			{
					var heightValue = "auto";           //插入元素高度/单位px  
					var mainContent = $("#content");  	
					var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)  
					 
					if((srollPos>=$(document).height()-$(window).height())&& more) 
					{
					$.ajax({
					    type: 'GET',
                        url:num+".html",
                        success: function (){
  	                        mainContent.append("<div style='border:0px solid;margin-top:1px;height:"+heightValue+"' >"+
						    "<iframe src='"+num+".html'"+"id='myframe"+num+"'"+"width=100% height=100% frameborder=0 scrolling=no type=iframe></iframe></div>");
							num=num+1;
                            } ,
                         error:	function(){
                               more = false;
                              }
                        });	
					}  
					for(var i=1;i<num;i++){
					    reinitIframe("myframe"+i);
					}		
			});  
            function reinitIframe(nameframe)        
            {            
            	var iframe = document.getElementById(nameframe);           
            	try{             
            		var bHeight = iframe.contentWindow.document.body.scrollHeight;                
            		var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;                
            		var height = Math.max(bHeight, dHeight);               
            		iframe.height =  height;   
            	}catch (ex){} 
            }
		function initIframe()
		{
		var iframe = document.getElementById("myframe0"); 
		iframe.height=$(window).height()+10;
		}		
        </script>  
    </head>  
    <body>  
	    <div id="content">  
	    	<div style='border:0px solid;margin-top:50px;height:auto;' >
	    		<iframe id="myframe0" src="0.html" height="100%" width="100%" οnlοad='initIframe()' frameborder="0" scrolling="no" type="iframe"> </iframe>
	    	</div>          
	    </div>  
    </body>  
</html>

赖人不学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
滚动条触底 加载下一页数据
mushroomLNL的博客
03-04 1040
页面再加载 当我们使用返回数据量大的接口的时候,如果全部申请回来,就会影响项目的性能,滚动条触底再加载下一页数据能确保用户讲页面拉到页面底部的时候再去申请下一页的数据 实现原理 找到滚动条触底事件 使用的是微信小程序中的 onReachBottom 判断还有没有下一页数据 获取到申请回来的总页数,如果只有总条数的话就用Math.ceil(总条数/页容量) 判断当前的页码 比较页码和总页数 页码>总页数 数据加载完了 弹出一个wx.showToast提示加载完成 页码<总页数 加载下一页数
js实现下拉滚动加载数据
☆╮123☆
07-01 1172
需要加hidhen标签：         //下一页            //是否还有内容           //是否加载完           //排序字段 js代码：                    $(function () {                     var cat_id = "";                     var so
强大的jquery下拉分页选择插件SelectPage
12-12
SelectPage.js是一款强大的jquery下拉分页选择插件。SelectPage.js下拉分页选择插件界面简洁，支持下拉，分页，键盘操作等功能。
element-ui中el-select下拉框滚动时分页加载数据
最新发布
qq_43151592的博客
03-29 613
中使用Element UI的el-select组件实现下滑分页加载的功能，通过自定义指令来判断是否需要滚动加载下一页数据。
js控制分页效果，下拉列表实时更新分页数量效果
qq_40825627的博客
12-13 1161
先来看效果图 小编采用的是json数据动态加载数据的，json格式的数据如下： { &quot;values&quot;:[ { &quot;name&quot;:&quot;111&quot;, &quot;city&quot;:&quot;111&quot;, &quot;postcode&quot;:&quot;111&quo
Jquery页面滚动动态加载数据，页面下拉自动加载内容
xiaozhen0610的博客
06-20 632
<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var range = 50; //距下边界长度/单位px v.
elementui中select下拉框添加分页（可搜索）
热门推荐
Lclghjk的博客
10-14 1万+
最近遇到这样的需求，select下拉框的数据太多，导致高度很高，影响美观，所以给select下拉框添加分页功能。新建一个组件。 首先是HTML部分 这里没什么说的 ，直接嵌套即可 <el-select v-model="value1" placeholder="选择埋点" :clearable="false" style="width: 240px" size="mini" refs="mySelect" :r
实现下拉框分页的js代码
dbeautifulLife的博客
01-11 2264
function getMajorSubList() { var majorCode = $('#majorCodeId').val(); $('#submajorSale').html("请选择"); /*获取专家列表*/ if(majorCode!=''){ $('#submajorSale').html(loadingSource); $.getJSON(path +
vue中h5下滑加载更多
qq_45700938的博客
02-09 1493
vue中在方法中 methods:{ // 触底加载更多 handleScroll() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let clientHeight = document.documentElement.clientHeight; let scrollHeight = document.documentElement.scrollH
原生js如何实现上拉加载下拉刷新？
m0_60676278的博客
01-05 199
通过touchmove记录向下滑动的距离，同时通过设置transform：translateY（x）来设置内容向下移动，控制滑动距离到达某个值时，禁止页面再做滑动。通过touchend记录手指离开事件，对滑动距离达到限定值时，做刷新请求数据处理，未到限定值时自动回弹translateY（0px）,并添加过渡动画。监听滑动事件scroll 当满足以上条件时执行异步请求，这里需要加一个节流，当触发是禁止再次触发，等到异步事件加载完毕后，才允许再次上拉触发。移动端历史日志、内容列表等模块中使用。
下滑加载更多js_下一页通过js实现点击「加载更多」功能实例
weixin_42131352的博客
12-30 847
关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。但实际用起来却是很麻烦。由于是第三方插件，要按照对方定义的方法使用，用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的，可以百度iscroll.js看看。我们在前端页面开发的时候，考虑到用...
(手机移动web)iscroll+html5+css3+js实现下拉刷新上拉分页的功能
01-17
基于iscroll4和html5、css3实现的下拉刷新、上拉分页的demo，兼容pc、android、ios、wp等设备。解决了上拉分页footer存在bug的问题。 支持chrome、ff、opera、360浏览器、百度浏览器、qq浏览器等众多主流浏览器。
iscroll+html5+css3+js实现下拉刷新上拉分页的功能
08-08
基于iscroll4和html5、css3实现的下拉刷新、上拉分页的demo，兼容pc、android、ios、wp等设备。解决了上拉分页footer存在bug的问题。 支持chrome、ff、opera、360浏览器、百度浏览器、qq浏览器等众多主流浏览器。
php+mysql+jquery.more.js下拉加载带sql数据完整流程带mysql测试数据
10-09
jquery.more.js,js下拉加载、jq下拉加载php+mysql+jquery.more.js完整一套流程。非常好用
Vue.js实现无限加载与分页功能开发
01-19
本篇文章是一篇Vue.js的教程，目标在于用一种常见的业务场景——分页/无限加载，帮助读者更好的理解Vue.js中的一些设计思想。与许多Todo List类的入门教程相比，更全面的展示使用Vue.js完成一个需求的思考过程；与...
js实现加载更多功能实例
11-29
项目的一个前端页面展示已购买商品时，要求能下拉加载更多。关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。 但实际用起来却是很麻烦。由于是第三...
reactnativeautoflatlist一个自动上拉下拉提供分页加载的FlatList组件
08-08
react-native-autoflatlist 一个自动上拉下拉提供分页加载的FlatList组件
vue实现的上拉加载更多数据/分页功能示例
10-16
主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
js页面滚动到底部时自动加载下一页数据
gaoxu529的专栏
03-09 1万+
一段滚动到页面底部自动加载更多数据的js代码，需要jquery.js 、 jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSize: 30, IsCompleted: false, init: function(rows) { //初始化，载入第一页数据 $(".list-item")
uniapp 实现 下拉分页加载数据
07-13
在 Uniapp 中实现下拉分页加载数据，可以通过以下步骤： 1. 首先，在页面中引入下拉刷新组件和分页加载组件。 ```html <template> <view> <list :finished="finished" @load="loadData" > <refresh refresher-triggered="onRefresh"> <!-- 下拉刷新的内容 --> </refresh> <cell v-for="(item, index) in dataList" :key="index"> <!-- 显示数据项的内容 --> </cell> <loading v-if="loading"></loading> </list> </view> </template> ``` 2. 在页面的 `data` 中定义数据相关的变量，如 `dataList` 用于存储加载的数据，`loading` 用于标识数据加载中，`finished` 用于标识是否已加载完所有数据。 ```javascript export default { data() { return { dataList: [], loading: false, finished: false, }; }, // ... }; ``` 3. 实现下拉刷新和分页加载的方法。 ```javascript export default { // ... methods: { // 下拉刷新 onRefresh() { // 清空数据列表 this.dataList = []; // 重置加载状态 this.finished = false; // 加载数据 this.loadData(); }, // 分页加载 loadData() { if (this.loading || this.finished) return; this.loading = true; // 发起网络请求获取数据 // 假设每页加载 10 条数据 // 模拟异步请求延迟 setTimeout(() => { // 模拟请求成功 const newData = [...]; // 新加载的数据 if (newData.length > 0) { this.dataList = this.dataList.concat(newData); } else { this.finished = true; // 数据已加载完 } this.loading = false; }, 1000); }, }, }; ``` 以上是一个简单的示例，实现了下拉刷新和分页加载数据的功能。当用户下拉刷新页面时，会触发 `onRefresh` 方法，清空数据并重新加载；当用户滚动到列表底部时，会触发 `loadData` 方法，加载更多数据并追加到列表中。你可以根据你的实际需求进行修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值