html5 swipe.js手机触屏下拉无限刷新代码



119 475 159



特效描述:html5 swipe.js 手机触屏 下拉无限刷新,html5下拉无限刷新结合swiper 响应 css3页面

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/dropload.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/dropload.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />

2. 引入JS

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/dropload.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/dropload.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

3. HTML代码

<!doctype html>
<html lang="zh-cn">
	<head>
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title>微商™</title>
		<style>
			* {margin: 0;padding: 0;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-text-size-adjust: none;}
			html {font-size: 10px;}
			body {font: "微软雅黑";background-color: #f5f5f5;font-size: 1.2em;}
			.header {height: 44px;line-height: 44px;background: white;}
			.inner {padding-bottom: 40px;-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;background-color: #fff;overflow-y: scroll;-webkit-overflow-scrolling: touch;}
			.opacity {-webkit-animation: opacity 0.5s linear;animation: opacity 0.5s linear;}
			@-webkit-keyframes opacity {0% {opacity: 0;}100% {opacity: 1;}}
			@keyframes opacity {0% {opacity: 0;}100% {opacity: 1;}}
			.a_color {color: black;}
			.two {text-align: center;font-size: 18px;background: #fff;}
			.footer {position: fixed;left: 0;bottom: 0;z-index: 9999;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;width: 100%;}
			.footer a {position: relative;display: block;-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;font-size: 10px;text-align: center;color: #666;background-color: #eee;text-decoration: none;}
			.favorable {margin-top: -100px;background: red;position: absolute;z-index: 9;margin-left: 10px;color: white;font-size: 10px;}
			.box {background: white;width: 100%;margin-top: 10px;height: 100px;position: relative;}
			.ribbon {position: absolute;z-index: 1;left: -5px;top: -5px;overflow: hidden;width: 75px;height: 75px;text-align: right;}
			.ribbon span {font-size: 10px;font-weight: bold;color: #FFF;text-transform: uppercase;text-align: center;line-height: 20px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);width: 100px;display: block;background: red;box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);position: absolute;top: 19px;left: -21px;}
			.ribbon span::before {content: "";position: absolute;left: 0px;top: 100%;z-index: -1;border-left: 1px solid red;border-right: 3px solid transparent;border-bottom: 1px solid transparent;border-top: 1px solid red;}
			.ribbon span::after {content: "";position: absolute;right: 0px;top: 100%;z-index: -1;border-left: 3px solid transparent;border-right: 3px solid red;border-bottom: 3px solid transparent;border-top: 3px solid red;}
			.box_img {width: 35%;height: 100%;float: left;}
			.box_img img {width: 100%;height: 100%;}
			.box_title {width: 62%;height: 100%;float: right;}
			.box_title_text {width: 100%;font-size: 10px;}
			.box_money {margin-top: 4px;font-size: 10px;}
			.box_money_s1 {color: red;font-size: 18px;}
			.box_money_s1 {color: red;}
		</style>
		<link rel="stylesheet" type="text/css" href="css/dropload.min.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/dropload.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="background: #CCCCCC;">
		<div class="wheel_banner" style="margin-top: 10px; 	border-bottom: 2px solid #357EBD;">
			<div id="module_1" class="swiper-container">
				<div class="swiper-wrapper">
					<div class="two swiper-slide"><img src="img/banner_1.png" style="width: 100%; height: 100%;" /></div>
					<div class="two swiper-slide"><img src="img/banner_2..png" style="width: 100%; height: 100%;" /></div>
					<div class="two swiper-slide"><img src="img/banner_3.png" style="width: 100%; height: 100%;" /></div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
			<!-- Initialize Swiper -->
			<script>
				var swiper = new Swiper('#module_1.swiper-container', {
					pagination: '.swiper-pagination',
					paginationClickable: true,
					loop: true,
					loopAdditionalSlides: 0,
					autoplay: 1000, //可选选项,自动滑动
					autoplayDisableOnInteraction: false
				});
			</script>
		</div>
		<div class="header">
			<div class="" style="width: 50%; float: left;padding-left: 10px; color: #357EBD;">
				潮流配饰
			</div>
			<div class="" style="width: 50%; float: right; text-align: right; padding-right: 10px;">
				<a href="#">more>></a>
			</div>
		</div>
		<div class="inner" id="inner_1">
			<div class="lists">
				<a class="a_color" href="#">
					<div class="box">
						<div class="ribbon"><span>双十一特惠</span></div>
						<div class="box_img">
							<img src="img/banner_1.png" />
						</div>
						<div class="box_title">
							<div class="box_title_text">
								文字描述文字描述文字描述文字描述文字文字描述文字描述文字描述文字描述文
							</div>
							<div class="box_money">
								<span class="box_money_s1">
								¥222
							</span>
								<s class="">
								¥222
							</s>
								<br /><span class="box_money_s2">
								返:¥222
							</span>
							</div>
						</div>
					</div>
				</a>
				<a class="a_color" href="#">
					<div class="box">
						<div class="ribbon"><span>双十一特惠</span></div>
						<div class="box_img">
							<img src="img/banner_1.png" />
						</div>
						<div class="box_title">
							<div class="box_title_text">
								文字描述文字描述文字描述文字描述文字文字描述文字描述文字描述文字描述文
							</div>
							<div class="box_money">
								<span class="box_money_s1">
								¥222
							</span>
								<s class="">
								¥222
							</s>
								<br />
								<span class="box_money_s2">
								返:¥222
							</span>
							</div>
						</div>
					</div>
				</a>
				<a class="a_color" href="#">
					<div class="box">
						<div class="ribbon"><span>双十一特惠</span></div>
						<div class="box_img">
							<img src="img/banner_1.png" />
						</div>
						<div class="box_title">
							<div class="box_title_text">
								文字描述文字描述文字描述文字描述文字文字描述文字描述文字描述文字描述文
							</div>
							<div class="box_money">
								<span class="box_money_s1">
								¥222
							</span>
								<s class="">
								¥222
							</s>
								<br />
								<span class="box_money_s2">
								返:¥222
							</span>
							</div>
						</div>
					</div>
				</a>
				<a class="a_color" href="#">
					<div class="box">
						<div class="ribbon"><span>双十一特惠</span></div>
						<div class="box_img">
							<img src="img/banner_1.png" />
						</div>
						<div class="box_title">
							<div class="box_title_text">
								文字描述文字描述文字描述文字描述文字文字描述文字描述文字描述文字描述文
							</div>
							<div class="box_money">
								<span class="box_money_s1">
								¥222
							</span>
								<s class="">
								¥222
							</s>
								<br />
								<span class="box_money_s2">
								返:¥222
							</span>
							</div>
						</div>
					</div>
				</a>
			</div>
		</div>
		<div class="footer">
			<a href="#1"><img src="img/iconfont-shouyesvg.png" />
				<div id="">首页</div>
			</a>
			<a href="#2"><img src="img/iconfont-fenlei.png" />
				<div id="">分类</div>
			</a>
			<a href="#3"><img src="img/iconfont-chengbao.png" />
				<div id="">免费开店</div>
			</a>
			<a href="#4"><img src="img/iconfont-renwu.png" />
				<div id="">我的微团</div>
			</a>
			<a href="#4"><img src="img/iconfont-sousuoqingchu.png" />
				<div id="">社区服务</div>
			</a>
		</div>
		<script>
			// dropload
			$('.inner').dropload({
				scrollArea: window,
				loadDownFn: function(me) {
					$.ajax({
						type: 'GET',
						url: 'json/more.json',
						dataType: 'json',
						success: function(data) {
							var result = '';
							for (var i = 0; i < data.lists.length; i++) {
								result += '<a class="a_color" href="' + data.lists[i].link + '"><div class="box"><div class="ribbon"><span>' + data.lists[i].favorable + '</span></div><div class="box_img"><img src="' + data.lists[i].pic + '" /></div><div class="box_title"><div class="box_title_text">' + data.lists[i].title + '</div><div class="box_money"><span class="box_money_s1">¥' + data.lists[i].money + '</span><s class="">¥'+ data.lists[i].re_money +' </s><br /><span class="box_money_s2">返:¥' + data.lists[i].return_money + '</span></div></div></div></a>';
							}
							// 为了测试,延迟1秒加载
							setTimeout(function() {
								$('.lists').append(result);
								me.resetload();
							}, 1000);
						},
						error: function(xhr, type) {
							alert('Ajax error!');
							me.resetload();
						}
					});
				}
			});
		</script>
	</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 图片拖动 导航切换 图片延迟加载 滑动选项卡切换 文字拖动 加载动画 文字延迟加载 图片滑动 拖动排序 图片切换 文字滑动 文字切换 弹出层拖动 滑动手风琴 背景切换 滑动星星打分 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滑动滑过 滚动切换 滑动选项卡切换 拖动拽动 选项卡切换 滑动手风琴 延长延迟加载

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到