慢慢买项目笔记

1.效果图

第一步

第二步

第三步

第四步

2. 源代码

2.1 页面1的html的code：

优惠券













首页 > 
优惠券

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：

优惠券








--点餐前出示手机中的优惠券，即可享受优惠--










首页 > 
优惠券 > 
优惠券

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");
})
}
});
})