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

痛定思痛。 2021-09-16 11:24 322阅读 0赞

html

<header class="mui-bar mui-bar-nav">
    			<span class="mui-title">上拉加载下拉刷新</span>
    		</header>
    
    		<div class="demoList mui-content .mui-scroll-action">
    			<div class="xiala" style="display: none;">正在刷新</div>
    		</div>
    
    		<section id="main">
    			<ul id="list_box">上拉加载更多</ul>
    		</section>

script

var TPL = "<div class=\"lists 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 = 3;
    
    			loadDatas(len, TPL, dom);
    
    			$('.demoList').on('touchmove', function(e) {
    				var touch = e.originalEvent.targetTouches[0];
    				var y = touch.pageY;
    				if(y < 120) {
    					$(".xiala").css({
    						"display": "block"
    					})
    					$(".lists").remove();
    					setTimeout(function() {
    						loadDatas(len, TPL, dom);
    						$(".xiala").css({
    							"display": "none"
    						})
    					}, 500)
    				}
    
    			});
    
    			// 上拉加载
    			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);
    					}
    				});
    			}

css

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

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关上拉加载下拉刷新

老方法，先上效果图： ![1264306-20190925171702811-981213350.gif][] 1.加入下拉刷新上拉加载的依赖 1 //下拉刷新

一时失言乱红尘/ 2023年08月17日 17:09/ 0 赞/ 102 阅读

相关下拉刷新上拉加载

下拉刷新： ![Center][] ![Center 1][] ![Center 2][] 上划加载 ![Center 3][] ![C

约定不等于承诺〃/ 2022年07月17日 02:22/ 0 赞/ 305 阅读

相关移动端上拉加载

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

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

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

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

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

相关 RecyclerView 上拉加载下拉刷新

RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout and

以你之姓@/ 2022年01月07日 12:13/ 0 赞/ 337 阅读

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

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

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

相关 JQ移动端上拉加载

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

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

相关 mui上拉刷新下拉加载

废话不多说，直接上代码 1、容器  <div id="refreshContainer" class="mui-content m

Dear 丶/ 2021年09月15日 16:48/ 0 赞/ 398 阅读

相关 uniapp下拉刷新上拉加载

一、需求留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据二、代码 ![在这里插入图片描述][watermark_t

﹏ヽ暗。殇╰゛Y/ 2021年09月03日 04:51/ 0 赞/ 669 阅读