first commit

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/index.js

@@ -0,0 +1,139 @@
+class Index {
+    constructor() {
+        // 横向菜单的下标
+        this.index = 0;
+        // 默认横向菜单的数据
+        this.principal = []
+        footer()
+        this.getClassApi();
+    }
+
+    async getClassApi() {
+        // 第一次打开app，本地没有缓存，发送请求获取菜单
+        if (localStorage.getItem("principal") == null) {
+            // 请求横向 菜单的数据
+            var res = await index.classApi();
+            localStorage.setItem("principal", JSON.stringify(res.principal));
+            localStorage.setItem("additional", JSON.stringify(res.additional));
+            this.principal = res.principal
+
+        // 第二次打开，本地已经有缓存了， 直接使用本地缓存过的菜单数据
+        } else {
+            this.principal = JSON.parse(localStorage.getItem("principal"))
+        }
+
+        // 渲染生成横向菜单和对应的内容
+        this.principal.forEach((v,i) => {
+
+            // 生成横向菜单
+            $(".header_menu ul").innerHTML += `
+               <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `;
+
+            // 生成横向菜单对应列表内容
+            if (i > 0) {
+                $(".swiper-wrapper").innerHTML += `
+                   <div class="swiper-slide">${v.title}</div>
+                `
+            }
+            
+        });
+
+
+        // 为每一个内容绑定滚动事件
+        var slide = _(".swiper-wrapper .swiper-slide");
+        var self = this;
+        slide.forEach((v, i) => {
+            if (i > 0) {
+                v.addEventListener('scroll', function () {
+                    if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
+                        self.principal[self.index].page += 1;
+                        if (self.principal[self.index].page <= self.principal[self.index].total_page) {
+                            console.log("请求数据")
+                            self.getClassList("loadMore")
+                        }
+                    }
+                })
+            }
+        })
+
+
+        // 初始化页面内容的轮播图
+        var self = this;
+        var mySwiper = new Swiper ('.swiper', {
+            direction: 'horizontal',
+            on: {
+                slideChangeTransitionEnd: function(){
+                    self.changeActive(this.activeIndex)
+                    self.getClassList();
+                },
+            },
+        })
+
+        // 为菜单的li标签绑定点击事件
+        var liArr = _(".header_menu ul li")
+        liArr.forEach((v,i) => {
+            v.onclick = () => {
+                this.changeActive(i)
+                mySwiper.slideTo(i)
+            }
+        })
+
+        this.getIndex();
+    }
+
+    async getIndex() {
+        var res = await index.indexList();
+
+        var slide = _(".swiper-wrapper .swiper-slide");
+
+        item(slide[this.index],res.list)
+    }
+
+    async getClassList(type = "click") {
+
+        var loadData = async () => {
+            var res = await index.classList({
+                id: this.principal[this.index].id,
+                page: this.principal[this.index].page
+            })
+
+            this.principal[this.index].total_page = res.total_page;
+            // res.data.forEach(v => {
+            //     this.principal[this.index].content.push(v)
+            // })
+
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ];
+
+            console.log("this.principal[this.index]: ", this.principal[this.index])
+            var slide = _(".swiper-wrapper .swiper-slide");
+            item(slide[this.index], res.data)
+        }
+
+        if (this.principal[this.index].id != -1) {
+            // 滚动加载更多
+            if (type == "loadMore") {
+                loadData();
+            // 点击 和 滑动页面
+            } else  {
+                if (this.principal[this.index].content.length == 0) {
+                    loadData();
+                }
+            }
+        }
+
+    }
+
+    changeActive(index) {
+        this.index = index;
+        var liArr = _(".header_menu ul li")
+        liArr.forEach(item => item.classList.remove("active"))
+        liArr[index].classList.add("active")
+    }
+}
+
+
+new Index();