JQ移动端上拉加载

男娘i 2021-09-16 11:22 332阅读 0赞

Html

<header class="mui-bar mui-bar-nav">
    			<span class="mui-title">上拉加载</span>
    		</header>
    		<div class="demoList mui-content">
    
    		</div>
    		<section id="main">
    			<ul id="list_box">上拉加载更多</ul>
    		</section>

CSS

.content{
    				background: url(images/body.png);
    				width: 200px;
    				height: 200px;
    				background-size: 100% 100%;
    			}

JS

1.调用

var TPL = "<div class=\"mui-card-header mui-card-media\">\n" +
        "\t\t\t\t<img src=\"images/logo.png\" />\n" +
        "\t\t\t\t<div class=\"mui-media-body\">\n" +
        "\t\t\t\t\t尼尔森\n" +
        "\t\t\t\t\t<p>发表于 2016-06-30 15:30</p> \n" +
        "\t\t\t\t\t<div class=\"content\"></div>\n" +
        "\t\t\t\t</div>\n" +
        "\t\t\t</div>";
    			var dom = ".demoList";
    			var len = 10;
    
    			loadDatas(len, TPL, dom);

2.封装方法

function loadDatas(len, TPL, dom) {
    				var page = 1, //分页码
    					off_on = false, //分页开关
    					timers = null;
    
    				// 首次加载数据
    				$(document).ready(function() {
    					loadData(len, TPL, dom);
    				})
    
    				// 参数
    				// len 每次加载多少条数据
    				// TPL 加载的模板
    				// dom 加载数据的Dom
    				function loadData(len, TPL, dom) {
    					var str = '';
    					for(var i = 0; i < len; i++) {
    						str += TPL;
    					}
    					$(dom).append(str);
    					off_on = true;
    				}
    
    				$(window).scroll(function() {
    					//当时滚动条离底部60px时开始加载下一页的内容
    					if(($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
    						clearTimeout(timers);
    						timers = setTimeout(function() {
    							page++;
    							console.log("第" + page + "页");
    							loadData(len, TPL, dom);
    						}, 300);
    					}
    				});
    			}

发表评论取消回复

表情：

评论列表（有 0 条评论，332人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 来写移动端，实现上拉加载，下拉刷新数据

项目是用vue +elementui来写移动端的：首先创建一个每个需要上拉加载数据的模板组件 LoadMore.vue <template> ...

た入场券/ 2024年04月19日 09:15/ 0 赞/ 65 阅读

相关移动端上拉加载更多

上拉加载更多组件的原理上拉加载 1。当滚动条到达触底距离（触底距离：距离底部的一定距离），触发加载下一页数据调用加载函数fn 2。如果正在加载下一页时（网速过慢时

雨点打透心脏的1/2处/ 2022年11月25日 13:17/ 0 赞/ 211 阅读

相关 JQ动态加载下拉框数据

$.getJSON("${pageContext.request.contextPath}/shop/loadAjaxFloor.action",

痛定思痛。/ 2022年08月22日 12:23/ 0 赞/ 218 阅读

相关 artTemplate JS模板引擎使用(移动端上拉加载)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>红包</title>

快来打我*/ 2022年06月18日 02:16/ 0 赞/ 242 阅读

相关 vue上拉加载

最近写移动端，需要用到上拉加载的效果，由于我自己写的触摸事件在微信上遇到点小问题，所以还是借用组件来完成了。朋友推荐了这个组件，感觉还不错： vue-impressio

我就是我/ 2022年06月07日 09:39/ 0 赞/ 181 阅读

相关移动端上拉加载

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na

布满荆棘的人生/ 2022年05月16日 04:17/ 0 赞/ 198 阅读

相关 jquery之移动端下拉刷新，上拉加载更多。

jquery的下拉刷新，上拉加载一、下拉刷新二、上拉加载更多一、下拉刷新 > 思路： > 1。在想

清疚/ 2022年01月31日 04:53/ 0 赞/ 2359 阅读

相关 JQ移动端上拉加载下拉刷新2

html <header class="mui-bar mui-bar-nav"> <span class="mui-title">上拉加载下拉刷新</

痛定思痛。/ 2021年09月16日 11:24/ 0 赞/ 353 阅读

相关 JQ移动端上拉加载

Html <header class="mui-bar mui-bar-nav"> <span class="mui-title">上拉加载</span

男娘i/ 2021年09月16日 11:22/ 0 赞/ 333 阅读

相关上拉加载篇

1、如何判断是否已经加载完数据 (1)通过判断页面获取到的数据数量和页面平均获取到的数据判断,比如每个页面返回10条,最后一个页面不到10条 (2)在知道总

悠悠/ 2021年07月24日 20:21/ 0 赞/ 426 阅读