first commit

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/page/index.js

@@ -0,0 +1,68 @@
+class Index {
+    constructor() {
+        this.getClass();
+        this.getIndex();
+        footer()
+    }
+
+    async getClass() {
+        var res = await server.type();
+        console.log(res)
+        res.principal.unshift({
+            id: null,
+            page: 0,
+            title: "首页"
+        })
+        res.principal.forEach((v,i) => {
+            $(".header_menu ul").innerHTML += `
+             <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `;
+
+            if (i > 0) {
+                $(".swiper-container .swiper-wrapper").innerHTML += `
+                  <div class="swiper-slide">${v.title}</div>
+                `
+            }
+
+        });
+
+        this.initSwiper();
+    }
+
+    async getIndex() {
+        var res = await server.index();
+        // TODO 实现封装列表的渲染
+        res.recommended.data.forEach((v,i) => {
+
+        })
+        console.log("getIndex: ",res)
+    }
+
+    initSwiper() {
+
+        var liArr = _(".header_menu ul li");
+
+        var pageSwiper = new swiper('.swiper-container', {
+            time: 3,
+            auto: false,
+            speed: 800,
+            on: {
+                slideChangeTransitionStart: function (index) {
+                    liArr.forEach(v => v.className = "")
+                    liArr[index].className = "active"
+                }
+            }
+        });
+
+        liArr.forEach((v,i) => {
+            v.onclick = () => {
+                pageSwiper.slideTo(i)
+                liArr.forEach(v => v.className = "")
+                v.className = "active"
+            }
+        })
+    }
+
+}
+
+new Index();