1.效果图
第一步
第二步
第三步
第四步
2. 源代码
2.1 页面1的html的code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/basic.css">
<link rel="stylesheet" href="../js/node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../js/node_modules/bootstrap/fonts/glyphicons-halflings-regular.svg ">
<link rel="stylesheet" href="../css/ly_sum.css">
<title>优惠券</title>
</head>
<body>
<!-- 整个页面容器 -->
<div>
<!-- 头部标题 -->
<header>
<a href="javascript:0" class="top_back glyphicon glyphicon-menu-left"></a>
<h1>
优惠券
</h1>
<a href="javascript:0" class="top_download">
<img src="../img/header_app.png" alt="">
</a>
</header>
<!-- 优惠券内容 -->
<main>
<ul id="yhq_lists">
</ul>
</main>
<!-- 底部 -->
<footer>
<div class="btm_nav">
<a href="javascript:;">首页</a> >
<a href="javascript:;">优惠券</a>
</div>
<iframe id="fot-page" name="fot-page" width="100%" height="100px" src="../../../public/common/comFooter.html"></iframe>
</footer>
</div>
<script type="text/template" id="yhq_template">
{{each result as value i}}
<!-- 遍历模板传入的对象里面的一个属性 -->
<li>
<a href="{{value.couponLink}}?couponid={{value.couponId}}">
<img src="{{result[i].couponImg}}" alt="">
{{value.couponTitle}}
</a>
</li>
{{/each}}
</script>
<script src="../js/node_modules/jquery/dist/jquery.js"></script>
<script src="../js/template.js"></script>
<script src="../js/ly_sum.js"></script>
</body>
</html>
2.1 页面1的javascriptCode：
$.ajax({
url:'http://157.122.54.189:9090/api/getcoupon',
type:"get",
success:function(data){
var html = template("yhq_template",data)
$("#yhq_lists").html(html);
}
})
2.2 页面2的html的code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/basic.css">
<link rel="stylesheet" href="../js/node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../js/node_modules/bootstrap/fonts/glyphicons-halflings-regular.svg ">
<link rel="stylesheet" href="../css/swiper-3.4.2.min.css">
<link rel="stylesheet" href="../css/couponproduct.css">
<title>Document</title>
</head>
<body>
<!-- 整个页面容器 -->
<div id="whole">
<!-- 头部标题 -->
<header>
<a href="ly_sum.html" class="top_back glyphicon glyphicon-menu-left"></a>
<h1>
优惠券
</h1>
<a href="javascript:0" class="top_download">
<img src="../img/header_app.png" alt="">
</a>
</header>
<!-- 优惠券内容 -->
<main>
<div class="Prompt">
<p>--点餐前出示手机中的优惠券，即可享受优惠--</p>
</div>
<div class="quan_list">
<!--商品列表 -->
<ul id="commodity_list">
</ul>
</div>
</main>
<!-- 底部 -->
<footer>
<div class="btm_nav" id="btm_nav_template">
<a href="javascript:;">首页</a> >
<a href="javascript:;">优惠券</a> >
<a href="javascript:;">优惠券</a>
</div>
<iframe id="fot-page" name="fot-page" width="100%" height="100px" src="../../../public/common/comFooter.html"></iframe>
</footer>
<!-- 遮罩层-->
<div class="swiper-container shadeHide">
<div class="swiper-wrapper" id="Mask_img_list">
<!-- 每一张图片渲染 -->
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script type="text/template" id="yhq_template">
{{each result as value i}}
<li class="commodity_item" data-btid="{{value.couponId}}" data-spid="{{i}}">
<a href="jivascript:;">
<div class="commodity_img">
{{#value.couponProductImg}}
</div>
<div class="introduce_item">
<h3>{{value.couponProductName}}</h3>
<h2>
<em>{{value.couponProductPrice}}</em>
</h2>
<div class="time">{{value.couponProductTime}}</div>
</div>
</a>
</li>
{{/each}}
</script>
<script type="text/template" id="yhq_img_template">
{{each result as value i}}
<div class="swiper-slide">
{{#value.couponProductImg}}
</div>
{{/each}}
</script>
<script src="../js/zepto.min.js"></script>
<script src="../js/template.js"></script>
<script src="../js/swiper-3.4.2.min.js"></script>
<script src="../js/couponproduct.js"></script>
</body>
</html>
2.2 页面2的javascriptCode：
$(document).ready(function () {
var id = {};
var url = "" + location.href;
var obj = url.split("?");
var keyValue = obj[1].split("=");
id[keyValue[0]] = keyValue[1];
$.ajax({
url: "http://157.122.54.189:9090/api/getcouponproduct",
type: "get",
data: id,
success: function (data) {
//页面商品渲染
var html = template("yhq_template", data);
$("#commodity_list").html(html);
// 轮播图遮罩层渲染
var imgHtml = template("yhq_img_template", data);
$("#Mask_img_list").html(imgHtml);
// mySwiper.removeAllSlides(); //移除全部
// $(".swiper-container").on("click", function () {
// mySwiper.slideTo(1, null, null) //传入参数
// })
//点击实现遮罩层
$("#commodity_list").on("click", ".commodity_item", function () {
$(".swiper-container").removeClass("shadeHide");
console.log(this)
var id = $(this).attr("data-spid"); //获取点击事件的自定义属性
// swiper插件初始化（要在页面渲染完成的情况下 否则获取不到页面的数据无法正常的使用）
var mySwiper = new Swiper(".swiper-container", {
// direction: "vertical",//方向设置默认水平方向
// loop: true, //是否要重复轮播
// 如果需要分页器
// pagination: {
// el: '.swiper-pagination', //el（element）
// },
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-#utton-next",
prevEl: ".swiper-button-prev"
},
observer: true,
observeParents: true,
//初次加载显示的页数
// initialSlide: id,
// 如果需要滚动条
// scrollbar: {
// el: ".swiper-scrollbar"
// }
});
if (id == 0) {
mySwiper.setWrapperTranslate(0)
} else {
mySwiper.slideTo(id, 0, false) //传入参数指定显示的页面
}
})
$(".swiper-container").on("click", function (e) {
console.log(this)
$(this).addClass("shadeHide");
})
}
});
})
