first commit

js/page/domestic.js

@@ -0,0 +1,136 @@
+class Domestic {
+    mySwiper = null;
+    tagList = [];
+    index = localStorage.getItem("index") || 0;
+
+    // 原生js dom操作全部忘记都没关系
+    // diff 虚拟dom 映射（局部渲染） 到真实dom
+    constructor() {
+        header(
+            `<div class="header_title flex1 ellipsis">分类</div>`,
+            ``,
+            ``
+        )
+        footer()
+        this.getTagServeData()
+    }
+
+
+    async getTagServeData() {
+        let self = this;
+
+        this.tagList = await tagServe.tagList()
+        console.log(this.tagList);
+
+        eachHtml(
+            ".type_list",
+            this.tagList,
+            (v, i) => `<li class="${i == this.index ? 'active' : ''}">${v.title}</li>`
+        )
+
+        $(".swiper-wrapper").append(
+            this.tagList.map(v => {
+                return `<div class="swiper-slide recommend-model default-model">
+                  <ul class="flex list p15 js"></ul>
+                </div>`
+            })
+        )
+
+        $(".type_list li").click(function () {
+            $(this).addClass("active").siblings().removeClass("active")
+            self.mySwiper.slideTo($(this).index())
+        })
+
+        this.initSwiper()
+
+        if (this.index == 0) {
+            await this.getTagInfoData()
+        } else {
+            console.log("this.index: ", this.index);
+            this.mySwiper.slideTo(this.index)
+        }
+
+        this.onIScroll()
+    }
+
+    // 第一次调用 点击按钮（滑动轮播图） click
+    // 第二次调用 滚动加载 scroll
+    async getTagInfoData(type = "click") {
+
+        let loadData = async () => {
+            let { totalPage, list } = await tagServe.tagInfo({
+                url: this.tagList[this.index].url,
+                page: this.tagList[this.index].page
+            })
+
+            this.tagList[this.index].totalPage = totalPage
+            this.tagList[this.index].content = [
+                ...this.tagList[this.index].content,
+                ...list
+            ]
+
+            // 向不同的 ul 中插入不同的内容
+            eachHtml(
+                // $(".swiper-slide ul") 返回的是数组
+                // eq 用来获取数组+下标的
+                // [1,2,3][0] 取到的虚拟dom，这种无法使用jquery方法
+                $(".swiper-slide ul").eq(this.index),
+                list,
+                (v) => item(v)
+            )
+
+            //this.onIScroll()
+        }
+
+        if (type == "click") {
+            if (this.tagList[this.index].content.length == 0) {
+                // 加载请求
+                loadData()
+            }
+        } else {
+            // 加载请求
+            loadData()
+        }
+    }
+
+    initSwiper() {
+        let self = this;
+        this.mySwiper = new Swiper('.type_list_content', {
+            on: {
+                slideChange: async function () {
+                    self.index = this.activeIndex
+                    localStorage.setItem("index", self.index)
+                    await self.getTagInfoData()
+                    $(".type_list li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
+                },
+            },
+        })
+    }
+
+    onIScroll() {
+
+        let self = this;
+
+        //  $(window)
+        $(".swiper-slide").scroll(async function () {
+            let scrollTop = $(this).scrollTop();
+            let ulHeight = $(this).find("ul").height()
+            // 可视区域高度 529
+            let windowHeight = $(this).height();
+
+            console.log("scrollTop: ", scrollTop);
+            console.log("windowHeight: ", windowHeight);
+            console.log("ulHeight: ", ulHeight);
+
+            if (Math.round(scrollTop + windowHeight - 15) >= parseInt(ulHeight)) {
+                console.log("到底部");
+                self.tagList[self.index].page += 1
+                if (self.tagList[self.index].page <= self.tagList[self.index].totalPage) {
+                    await self.getTagInfoData("scroll")
+                }
+            }
+        });
+    }
+}
+
+new Domestic