正文

实现移动端上拉加载效果

heyujun-  heyujun-  2022-09-04  754

关键词：

毕设终于结束了，做了一个webApp，从中学习到了很多，页面有用到上拉加载的效果。今天就整理了一下。

上拉加载的实现思路其实很简单：

1.移动端触发touchmove事件(上拉)

2.判断最后一个元素是否已出现在底部

3.若出现，则js添加元素到页面末尾

思路图：

接下来开始编写style样式：

html,body{
	margin: 0px;
	width: 100%;
	height: 100%;
}
li{
	list-style: none;
}
#personkit_article_ul{
	width: 100%;
	position: relative;
	-webkit-padding-start:0;
	-webkit-margin-before:0;
	-webkit-margin-after:0;
}
.pin{
	/*width: 100%;*/
	height: 90px;
	background-color: #eee;
	padding: 6px 8px;
	position: relative;
	border-bottom: 1px solid #fff;
}
.personkit-article__img{
	width: 116px;
	height: 90px;
}
.personkit-article__img img{
	width: 100%;
	height: 100%;
}
.personkit-article__info{
	position: absolute;	
	left: 130px;
	top: 0px;
	padding: 0px 8px;
}
.personkit-article__title{
	line-height: 0px;
}
/*多行文本溢出作省略处理*/
.personkit-article__info p{
	display: -webkit-box;
	overflow: hidden;
	text-overflow:ellipsis;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
}
.bottom-line{
	text-align: center;
	background-color: #eee;
}

html结构：

<section id="item">
	<ul id="personkit_article_ul">
		<li class="pin">
			<div class="personkit-article__img">
				<img src="../public/imgs/4.png" alt="">
			</div>
			<div class="personkit-article__info">
				<h3 class="personkit-article__title">关于保健的一本书</h3>
				<p>原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊</p>
			</div>
		</li>
		<li class="pin">
			<div class="personkit-article__img">
				<img src="../public/imgs/4.png" alt="">
			</div>
			<div class="personkit-article__info">
				<h3 class="personkit-article__title">关于保健的一本书</h3>
				<p>原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊</p>
			</div>
		</li>
		<li class="pin">
			<div class="personkit-article__img">
				<img src="../public/imgs/4.png" alt="">
			</div>
			<div class="personkit-article__info">
				<h3 class="personkit-article__title">关于保健的一本书</h3>
				<p>原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊</p>
			</div>
		</li>
		<li class="pin">
			<div class="personkit-article__img">
				<img src="../public/imgs/4.png" alt="">
			</div>
			<div class="personkit-article__info">
				<h3 class="personkit-article__title">关于保健的一本书</h3>
				<p>原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊</p>
			</div>
		</li>
		<li class="pin">
			<div class="personkit-article__img">
				<img src="../public/imgs/4.png" alt="">
			</div>
			<div class="personkit-article__info">
				<h3 class="personkit-article__title">关于保健的一本书</h3>
				<p>原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊</p>
			</div>
		</li>
		<li class="pin">
			<div class="personkit-article__img">
				<img src="../public/imgs/4.png" alt="">
			</div>
			<div class="personkit-article__info">
				<h3 class="personkit-article__title">关于保健的一本书</h3>
				<p>原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊</p>
			</div>
		</li>
	</ul>
	<div class="bottom-line"></div>
</section>

js是用zepto.js库实现的：

;(function(){
	$('#personkit_article_ul').on('touchmove',function(){
		//判断最后一个元素是否在底部之上
		if( $('.pin').eq($('.pin').length-1).offset().top-$(window).scrollTop() < $(window).height() ){
			$('.bottom-line').css('display','block').text('正在刷新...');
			checkPull();
		}
	});
	//添加元素方法
	function checkPull(){
		var pinNew;
		pinNew=document.createDocumentFragment();
		//每次添加5条内容
		for(var j=5;j>0;j--){
			var li=document.createElement('li');
			li.className="pin";
			li.innerHTML='<div class="personkit-article__img"><img src="../public/imgs/4.png" alt=""></div><div class="personkit-article__info"><h3 class="personkit-article__title">关于保健的一本书</h3><p>原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊</p></div>';
			pinNew.appendChild(li);
		}
		$('#personkit_article_ul')[0].appendChild(pinNew);
	}
})();

这个效果是模拟移动端，测试时可使用谷歌浏览器——右键——审查元素，点击上面已圈点的地方可看到效果

mui实现移动端上拉加载下拉刷新功能

移动端上拉加载下拉刷新功能是必不可少运用非常频繁的mui框架实现方法引入mui加载文件<scriptsrc="js/mui.min.js"></script><linkhref="css/mui.min.css"rel="stylesheet"/>html:<divid="pullrefresh"class="mui-contentmui-scroll-w 查看详情

javascript--基于jquery的模仿移动端上拉加载更多控件

简单实现手机端上拉加载更多，通过触发trigger()事件，触发原先已经写好的请求css样式.more{padding:10px10px;height:50px;background:#fff;background-clip:content-box;text-align:center;line-height:50px;font-family:"MicrosoftYahei";display:non 查看详情

移动端--上拉加载更多

移动端--上拉加载更多在移动端上经常有很多，上拉加载很多的需求这个不知道是哪个群友总结的发到群里的作为日后参考的demo,仅此留念。下载链接:http://files.cnblogs.com/files/leshao/%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD%E6%9B%B4%E... 查看详情

移动端touch事件||上拉加载更多

...言：说多了都是泪，在进行项目开发时，在上拉加载更多实现分页效果的问题上，由于当时开发任务紧急，所以就百度找了各种移动端的上拉下拉实现加载更多的插件。然后就留下了个坑：上拉加载的时候会由于用户错误的姿势... 查看详情

vue中好用的下拉刷新、上拉加载插件mescroll.js

...件做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点1.npm安装2.导入(在哪个页面使用,则在哪个页面导入)：注册组件：3.template使用4.data里进行相关配置5.style样式... 查看详情

手机端效果实现下拉刷新上拉加载更多数据---请求数据篇(代码片段)

importReact,Componentfrom'react';importReactPullLoad,STATSfrom'react-pullload';import"../../../node_modules/react-pullload/dist/ReactPullLoad.css"importUnitfrom'../../u 查看详情

使用swiperefreshlayout和recyclerview实现仿“简书”下拉刷新和上拉加载更多

...概述本篇博客介绍的是如何使用SwipeRefreshLayout和RecyclerView实现高仿简书Android端的下拉刷新和上拉加载更多的效果。根据效果图可以发现，本案例实现了如下效果：第一次进入页面显示SwipeRefreshLayout的下拉刷新效果当内容... 查看详情

使用swiperefreshlayout和recyclerview实现仿“简书”下拉刷新和上拉加载更多

手机端效果实现下拉刷新上拉加载更多数据---自定义数据篇(代码片段)

代码如下需安装react-pullload插件yarnaddreact-pullloadimportReactfrom'react'import"../../../node_modules/react-pullload/dist/ReactPullLoad.css";importReactPullLoad,STATSfrom'react-pullload 查看详情

ios下拉刷新和上拉加载更多效果原理

...多功能是一个应用非常广泛的一个效果，而网上也提供了实现这种效果的第三方库，比如MJRefresh，用起来非常方便。那么，我们有没有想过下拉刷新和上拉加载更多的原理是什么，我们自己如何封装一个这种上下拉刷新的效果出... 查看详情

iosuitableview-下拉刷新上拉加载

本文主要内容：UITableView下拉刷新、上拉加载的实现。2017-03-17更新：代码更新到Swift3实现的效果如下：实现方式：使用MJRefresh框架。关于MJRefresh框架：MJRefresh框架是李明杰老师制作的开源框架，使用MJRefresh... 查看详情

andorid上拉加载更多的几种实现方式

...化,今天就把用过的几种方式总结一下.2.上拉加载更多的实现方式ListView控件;作为一种传统列表展现的方式,ListView控件的addHeaderView(...) 查看详情

vue2.0移动端，下拉刷新，上拉加载更多插件，修改版

在【实现丰盛】的插件基础修改【vue2.0移动端，下拉刷新，上拉加载更多插件】，1.修改加载到尾页面，返回顶部刷新数据，无法继续加重下一页2.修改加载完成文字提示原文链接：http://www.cnblogs.com/sichaoyun/p/6647458.html <... 查看详情

vue和mintui-loadmore结合实现下拉刷新，上拉加载（待优化）

mintui是饿了么团队针对vue开发的移动端组件库，方便实现移动端的一些功能，这里只用了Loadmore功能实现移动端的上拉分页刷新，下拉加载数据.mintui官网：http://mint-ui.github.io/#!/zh-cn<template><divclass="main-body":style="{‘-webkit-ove... 查看详情

vue实现网络图片瀑布流+下拉刷新+上拉加载更多(代码片段)

一、思路分析和效果图　　用vue来实现一个瀑布流效果，加载网络图片，同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现，捋下思路：根据加载数据的顺序，依次追加标签展示效果；选择哪种方式实现瀑布... 查看详情

使用swiperefreshlayout和recyclerview实现仿“简书”下拉刷新和上拉加载更多

h5下拉刷新和上拉加载实现原理浅析(代码片段)

...iscroll，pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。实现原理下拉刷新实现下拉刷新主要分为三步：监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；监听原生touchmove事件，记录并计算当前滑动... 查看详情

js移动端的下拉刷新，上拉加载更多。

functionrefresh(refresh,loadmore){$(window).scroll(function(){console.log(‘正在滑动f‘);varscrollTop=$(this).scrollTop();//滚动条距离顶部的高度varscrollHeight=$(document).height();//当前页面的总高度varclientHeight=$(this).h 查看详情