first commit

历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/index.js

@@ -0,0 +1,51 @@
+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()