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



88 348 117



特效描述: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>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 拖动 拖拽 拖动插件 拖拽插件 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 延迟加载 无限加载 延迟 加载 图片拖动 图片拖拽 图片延迟加载 图片延迟 图片加载 文字延迟加载 文字延迟 文字加载 图片滑动 图片滑块 图片切换 图片选项卡 图标选项卡

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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