first commit

历届学生/font-end-nine/项目练习/学生项目/杨锐/枸杞社/js/page/index.js

@@ -0,0 +1,141 @@
+  class Index {
+    constructor () {
+        this.index = 0;
+        this.principal = [] //定义两个全局变量下标和数组
+
+        footer(); //调用底部菜单
+        this.getClassList()  //调用
+    }
+
+    //调用 getClassList接口
+    async getClassList() {
+        var self = this;
+        var res = await indexServe.classList();
+        console.log(res);
+        this.principal = res.principal
+
+
+        this.principal.forEach((v,i) => {
+            $(".header_menu ul").html(`
+              <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `) //对this.principal 进行遍历 向.header_menu ul里面添加li li的数据就是v.title
+
+            $(".page_wrapper").html(`
+               <div class="swiper-slide">
+                  <div class="list">
+                  </div>
+                </div>
+            `); //向page_wrapper添加swiper-slide（也就是父容器）
+
+            _(".swiper-wrapper .swiper-slide").forEach(v => {
+                v.onscroll = () => {
+                    const {clientHeight, scrollHeight, scrollTop} = v;
+                    const distance = scrollHeight- scrollTop - clientHeight;
+                    if(distance <= 0) {
+                        // 首页
+                        console.log("滚动到底部...");
+                        if (this.index == 0) {
+                            this.getIndex()
+                        } else {
+                            this.principal[this.index].page += 1
+                            if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                                this.getClassListArr("more")
+                            } else {
+                                console.log("已经没有数据了！！！");
+                            }
+                        }
+                    }
+                }
+            })
+        })
+
+        click($('.header_menu i'), function () {
+            console.log(this);
+        })
+
+        click(_(".header_menu ul li"), function () {
+            self.changeActive(this.index)
+        })
+
+        this.getIndex()
+        this.initPage()
+    }
+
+    //点击分类的方法
+    async getClassListArr(type = "click") {
+        var getData = async () => {
+            var res = await indexServe.classListArr({
+                page: this.principal[this.index].page,
+                id: this.principal[this.index].id
+                //数组的参数通过数组加下标的方式拿到
+            });
+
+            this.principal[this.index].total_page = res.total_page
+            //为数组里面添加个总页面total_page
+
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data   //向content添加数组以及返回的新数组
+            ];
+
+            item(
+                _(".swiper-slide .list")[this.index],
+                // this.principal[this.index].content
+                res.data
+            ) //调用item父元素加数据
+        }
+
+        if (type == "click") {
+            if (this.principal[this.index].id != -1)
+            //如果数组中id不等于负一也就是不是首页
+            {
+                if (this.principal[this.index].content.length == 0) 
+                //并且数组为0时
+                {
+                    getData()   //请求数据
+                }
+            }
+        } else {
+            getData()
+        }
+    }
+    //更改activ样式
+    changeActive(index) {
+        this.index = index
+        _(".header_menu ul li").forEach(v => v.remove("active"))
+        // 对.header_menu ul li进行遍历先删除所有的active
+        _(".header_menu ul li")[index].add("active")
+        // 再通过数据加下标的方式给添加active
+        this.mySwiper.slideTo(index) //点击时页面跟着标题一起切换  必要参数为下标（index）
+    }
+
+    //调用index接口
+    async getIndex() {
+        var res = await indexServe.index();
+        this.principal[this.index].content = [ //数组加下标的方式存入数据组中的content
+            ...this.principal[this.index].content,
+            ...res.list
+            //...是指将数组中的元素都取出来
+        ];
+
+        item(_(".swiper-slide .list")[this.index], res.list)
+
+    }
+
+    //页面轮播图
+    initPage() {
+        var self = this; //提前定义一个this
+        this.mySwiper = new Swiper('.swiper-container', { //定义一个mySwiper 加了this为全局变量
+            direction: 'horizontal', //切换水平滑动
+            on:{
+                slideNextTransitionEnd: function() {
+                    //监听是否滑动结束
+                  self.changeActive(this.activeIndex) //获取当前的滑动后的下标
+                  self.getClassListArr() 
+                },
+            },
+          })  
+    }
+}
+
+new Index()