51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
class index {
|
|
constructor() {
|
|
this.mySwiper = null;
|
|
this.GetThreeMeals();
|
|
footer()
|
|
}
|
|
|
|
async GetThreeMeals() {
|
|
var res = await indexServe.threeMeals();
|
|
console.log(res);
|
|
res.forEach((v, i) => {
|
|
$(".test").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
|
|
|
|
$(".banner .swiper-wrapper").append(`
|
|
<div class="swiper-slide">
|
|
${v.content.map((item) => {
|
|
return `
|
|
<img src="${item.img}" alt="">
|
|
`
|
|
}).toString().replaceAll(",", "")}
|
|
</div>
|
|
`)
|
|
});
|
|
|
|
var self = this;
|
|
$(".test li").click(function () {
|
|
$(this).addClass("active").siblings().removeClass("active");
|
|
self.mySwiper.slideTo($(this).index())
|
|
});
|
|
|
|
|
|
this.initThreeMealsSwiper()
|
|
}
|
|
|
|
initThreeMealsSwiper() {
|
|
this.mySwiper = new Swiper('.banner', {
|
|
direction: 'horizontal', // 垂直切换选项
|
|
// 如果需要分页器
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
on: {
|
|
slideChangeTransitionEnd: function () {
|
|
$(".test li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
|
|
},
|
|
},
|
|
})
|
|
}
|
|
}
|
|
|
|
new index() |