first commit

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/index.js

@@ -0,0 +1,140 @@
+class index {
+    constructor() {
+        this.principal = [];
+        this.index = localStorage.getItem("index") == null ? 0 : localStorage.getItem("index");
+        footer()
+        this.getIndexData();
+        this.GetType();
+    }
+
+    // 获取横向分类的数据
+    async GetType() {
+        var res;
+        // 第一次访问app，本地没有缓存的principal分类，所以发送请求去获取
+        if (localStorage.getItem("principal") == null) {
+            var data = await indexServe.type();
+            console.log("data === ", data);
+            res = data.principal
+            localStorage.setItem("principal", JSON.stringify(data.principal))
+            localStorage.setItem("additional", JSON.stringify(data.additional))
+        } else {
+            res = JSON.parse(localStorage.getItem("principal"))
+        }
+       
+        this.principal = res;
+
+        this.principal.unshift({
+            id: -1,
+            page: 0,
+            title: "首页",
+            content: []
+        })
+
+
+        this.principal.forEach((v, i) => {
+            v.content = [];
+            // 渲染横向菜单
+            $(".header_menu ul").innerHTML += `<li class="${i == this.index ? 'active_menu' : ''}">${v.title}</li>`;
+
+            // 生成横向的轮播图
+            if (i != 0) {
+                $(".swiper-container .swiper-wrapper").innerHTML += `<div class="swiper-slide item_list"></div>`
+            }
+        });
+
+        OnScrollBottom(".swiper-wrapper .swiper-slide", async () => {
+            if (index != 0) {
+                this.principal[this.index].page++;
+                if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                    await this.GetClassList("more")
+                    if (this.principal[this.index].page == this.principal[this.index].total_page) {
+                        _(".swiper-wrapper .swiper-slide")[this.index].innerHTML += `<p class="nodata">...暂无数据...</p>`
+                    }
+                }
+                
+            }
+        })
+
+        console.log(this.principal);
+        this.initSwiper();
+    }
+
+    initSwiper() {
+       
+
+        // 改变激活样式的封装
+        function changeAction(index) {
+            _(".header_menu ul li").forEach(v => {
+                v.className = ""
+            });
+            _(".header_menu ul li")[index].className = "active_menu"
+        }
+
+        var page = new swiper(".swiper-container", {
+            time: 3,
+            on: {
+                slideChangeTransitionStart: (index) => {
+                    this.index = index;
+                    localStorage.setItem("index", this.index)
+                    changeAction(index)
+                    this.GetClassList()
+                }
+            }
+        });
+
+        _(".header_menu ul li").forEach((v, i) => {
+            v.onclick = () => {
+                this.index = i;
+                localStorage.setItem("index", this.index)
+                page.slideTo(i);
+                changeAction(i);
+                this.GetClassList()
+            }
+        });
+
+        if (localStorage.getItem("index") != null) {
+            this.GetClassList()
+            page.slideTo(this.index);
+        }
+    }
+
+    // type click 表示点击或者滑动
+    //      more  表示滚动加载数据
+    async GetClassList(type = "click") {
+        var getData = async () => {
+            var res = await indexServe.classList({
+                page: this.principal[this.index].page,
+                id: this.principal[this.index].id
+            });
+
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ];
+
+            this.principal[this.index].total_page = res.total_page;
+            item(res.data, _(".swiper-wrapper .swiper-slide")[this.index])
+
+        }
+        if (this.index != 0) {
+            if (type == "click") {
+                if (this.principal[this.index].content == 0) { 
+                   await getData()
+                }
+            } else {
+                await getData()
+            }
+        }
+
+
+    }
+
+
+    async getIndexData() {
+        var res = await indexServe.index();
+        item(res.newest.data, $(".newest"))
+        item(res.recommended.data, $(".recommended"))
+    }
+}
+
+new index()