hahah

css/page/domestic.css

@@ -0,0 +1,24 @@
+@import "../tool/color.css";
+@import "../tool/size.css";
+@import "../tool/utils.css";
+
+.type_list {
+    li {
+        text-align: center;
+        margin-bottom: var(--f10);
+        width: 25%;
+        a {
+            .text {
+                color: var(--textColor);
+                font-size: var(--f18);
+                margin-bottom: .14rem;
+            }
+            .nums {
+                font-size: var(--f14);
+                color: var(--tipsTextColor);
+            }
+        }
+        
+       
+    }
+}

css/page/info.css

@@ -4,11 +4,7 @@
 
 
 .header {
-    color: var(--textColor);
+ 
-    font-size: var(--f16);
-    .title{
-        margin: 0 .16rem;
-    }
     .ilist {
         i {
             font-size: var(--f22) !important;

css/tool/clear.css

@@ -7,13 +7,23 @@
   font-size: .32rem;
 }
 
-p,body,h1,h2,h3,h4,h5,h6,ul,li{
+p,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+li {
   margin: 0;
   padding: 0;
 }
 
 html {
-    font-family: sans-serif; /* 1 */
+  font-family: sans-serif;
+  /* 1 */
   line-height: 1;
 }
 
@@ -29,6 +39,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   height: 0;
 }
 
+a {
+  color: #000;
+}
+
 li {
   list-style: none;
 }
@@ -62,7 +76,8 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
 
 figcaption,
 figure,
-  main { /* 1 */
+main {
+  /* 1 */
   display: block;
 }
 
@@ -80,9 +95,12 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    */
 
 hr {
-    box-sizing: content-box; /* 1 */
+  box-sizing: content-box;
-    height: 0; /* 1 */
+  /* 1 */
-    overflow: visible; /* 2 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
 }
 
 /**
@@ -91,8 +109,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    */
 
 pre {
-    font-family: monospace, monospace; /* 1 */
+  font-family: monospace, monospace;
-    font-size: 1em; /* 2 */
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
   white-space: pre-wrap;
   word-break: break-all;
   margin: 0;
@@ -108,8 +128,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
 
 a {
   text-decoration: none;
-    background-color: transparent; /* 1 */
+  background-color: transparent;
-    -webkit-text-decoration-skip: objects; /* 2 */
+  /* 1 */
+  -webkit-text-decoration-skip: objects;
+  /* 2 */
   user-select: none;
   -webkit-user-select: none;
 }
@@ -130,9 +152,12 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    */
 
 abbr[title] {
-    border-bottom: none; /* 1 */
+  border-bottom: none;
-    text-decoration: underline; /* 2 */
+  /* 1 */
-    text-decoration: underline dotted; /* 2 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
 }
 
 /**
@@ -161,8 +186,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
 code,
 kbd,
 samp {
-    font-family: monospace, monospace; /* 1 */
+  font-family: monospace, monospace;
-    font-size: 1em; /* 2 */
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
 }
 
 /**
@@ -263,10 +290,14 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
 textarea {
   border: none;
   outline: none;
-    font-family: sans-serif; /* 1 */
+  font-family: sans-serif;
-    font-size: 100%; /* 1 */
+  /* 1 */
-    line-height: 1.15; /* 1 */
+  font-size: 100%;
-    margin: 0; /* 2 */
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
 }
 
 /**
@@ -275,7 +306,8 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    */
 
 button,
-  input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -285,7 +317,8 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    */
 
 button,
-  select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -296,10 +329,12 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    */
 
 button,
-  html [type="button"], /* 1 */
+html [type="button"],
+/* 1 */
 [type="reset"],
 [type="submit"] {
-    -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button;
+  /* 2 */
 }
 
 /**
@@ -343,12 +378,18 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    */
 
 legend {
-    box-sizing: border-box; /* 1 */
+  box-sizing: border-box;
-    color: inherit; /* 2 */
+  /* 1 */
-    display: table; /* 1 */
+  color: inherit;
-    max-width: 100%; /* 1 */
+  /* 2 */
-    padding: 0; /* 3 */
+  display: table;
-    white-space: normal; /* 1 */
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
 }
 
 /**
@@ -357,8 +398,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    */
 
 progress {
-    display: inline-block; /* 1 */
+  display: inline-block;
-    vertical-align: baseline; /* 2 */
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */
 }
 
 /**
@@ -377,8 +420,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
 
 [type="checkbox"],
 [type="radio"] {
-    box-sizing: border-box; /* 1 */
+  box-sizing: border-box;
-    padding: 0; /* 2 */
+  /* 1 */
+  padding: 0;
+  /* 2 */
 }
 
 /**
@@ -396,8 +441,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    */
 
 [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
+  -webkit-appearance: textfield;
-    outline-offset: -2px; /* 2 */
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
 }
 
 /**
@@ -415,8 +462,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    */
 
 ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
+  -webkit-appearance: button;
-    font: inherit; /* 2 */
+  /* 1 */
+  font: inherit;
+  /* 2 */
 }
 
 /* Interactive
@@ -427,7 +476,8 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
    * 1. Add the correct display in Edge, IE, and Firefox.
    */
 
-  details, /* 1 */
+details,
+/* 1 */
 menu {
   display: block;
 }

css/tool/utils.css

@@ -61,3 +61,9 @@
     text-overflow:ellipsis; 
     white-space:nowrap;
 }
+
+.header_title {
+    color: var(--textColor);
+    font-size: var(--f16);
+    margin: 0 .16rem;
+}

js/config/index.js

@@ -36,6 +36,7 @@ let config = {
         infoList: '/info/list',
         tagList: '/tag/list',
         tagRecommend: '/tag/recommend',
+        tagInfo: '/tag/info',
         searchHot: '/search/hot',
         searchKey: '/search/key',
     }

js/page/domestic.js

@@ -1,6 +1,30 @@
 class Domestic {
     constructor() {
+        util.header(
+            `<div class="header_title">分类</div>`,
+            "",
+            ""
+        )
         util.footer()
+        this.getTagListData()
+    }
+
+
+    async getTagListData() {
+       let res = await tagServe.tagList()
+       
+       $(".type_list").innerHTML = res.maps(v => {
+         
+          return `
+            <li>
+                <a href="./tagListInfo.html?url=${v.url}&title=${v.title}">
+                    <div class="text">${v.title}</div>
+                    <p class="nums">${v.count}套</p>
+                </a>
+            </li>
+          `
+       })
+       
     }
 }
 

js/page/index.js

@@ -17,7 +17,7 @@ class Index {
         this.getTagRecommend() 
         this.getHomeHotData()
         this.getHomeListData()
-        this.initSwiper()
+       
         this.event()
     }
 
@@ -39,8 +39,8 @@ class Index {
         $(".recommend-tag").innerHTML =  res.maps(v => {
             return `
                <li>
-                    <div class="icon">${v.title.substr(0,1)}</div>
+                    <a class="icon" href="./tagListInfo.html?url=${v.url}&title=${v.title}">${v.title.substr(0,1)}</a>
-                    <div class="title">${v.title}</div>
+                    <a class="title" href="./tagListInfo.html?url=${v.url}&title=${v.title}">${v.title}</a>
                 </li>
             `
         })
@@ -56,14 +56,14 @@ class Index {
                 </div>
             `
         })
+
+        this.initSwiper()
     }
 
 
     initSwiper() {
         var mySwiper = new Swiper('.banner', {
-            loop: true, // 循环模式选项
+            loop: true,
-
-            // 如果需要分页器
             pagination: {
                 el: '.swiper-pagination',
             },

js/page/info.js

@@ -13,7 +13,7 @@ class Info {
             .then(() => {
 
                 util.header(
-                    `<div class="title flex1 ellipsis">${this.title}</div>`,
+                    `<div class="header_title flex1 ellipsis">${this.title}</div>`,
                     `
                     <div class="ilist">
                         <i class="iconfont icon-wujiaoxing"></i>
@@ -53,11 +53,15 @@ class Info {
 
         // TODO 找一个合适分享
         $(".icon-fenxiang").onclick = async () => {
-            await navShare({
+            await navigator.clipboard.writeText(`
-                title: this.title,
+我这有个好看的，快来看看 ${this.title}
-                text: `我这有个好看的，快来看看 ${this.title}`,
+${location.href}
-                url: location.href
+            `)
-            })
+            // await navShare({
+            //     title: this.title,
+            //     text: `我这有个好看的，快来看看 ${this.title}`,
+            //     url: location.href
+            // })
         }
 
         let sc = $(".icon-wujiaoxing")

js/page/search.js

@@ -43,6 +43,7 @@ class Search {
         let input = $(".header input")
 
         $(".header .button").onclick = async () => {
+            this.page = 1
             if (input.value.length != 0) {
                 this.keyword = input.value
                 this.totalArr = []
@@ -51,7 +52,13 @@ class Search {
                     util.hidden(".no-search")
                     item(".have-search ul", this.totalArr)
                     util.show(".have-search")
-                    this.onscroll()
+                    onscroll(async () => {
+                        this.page += 1
+                        if (this.page <= this.totalPage) {
+                            await this.getSearchKeyData()
+                            item(".have-search ul", this.totalArr)
+                        }
+                    })
                 }
 
             }
@@ -75,23 +82,6 @@ class Search {
         this.totalPage = totalPage
         list.forEach(v => this.totalArr.push(v));
     }
-
-    // 滚动到底部实现自动加载下一页数据
-    onscroll() {
-        window.onscroll = async () => {
-            var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
-            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-            var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
-
-            if (clientHeight + Math.ceil(scrollTop) >= scrollHeight) {
-                this.page += 1
-                if (this.page <= this.totalPage) {
-                    await this.getSearchKeyData()
-                    item(".have-search ul", this.totalArr)
-                }
-            }
-        }
-    }
 }
 
 new Search

js/page/tagListInfo.js

@@ -0,0 +1,37 @@
+class TagListInfo {
+    page = 1;
+    totalPage = 0;
+    totalArr = []
+
+    constructor() {
+        util.header(
+            `<div class="header_title">${query("title")}</div>`,
+            "",
+        )
+        this.getTagInfoData()
+    }
+
+    async getTagInfoData() {
+        let { totalPage, list } = await tagServe.tagInfo({ 
+            url: query("url"), 
+            page: this.page 
+        });
+
+        this.totalPage = totalPage
+        // list.forEach(v => {
+        //     this.totalArr.push(v)
+        // });
+
+        this.totalArr = [ ...this.totalArr, ...list ]
+        item(".default-model ul", this.totalArr)
+        onscroll(async () => {
+            this.page += 1
+            if (this.page <= this.totalPage) {
+                await this.getTagInfoData()
+                // item(".default-model ul", list)
+            }
+        })
+    }
+}
+
+new TagListInfo

js/serve/tag.js

@@ -10,6 +10,15 @@ class TagServe {
         })
     }   
 
+    async tagInfo (data = {}) {
+        let http = new Ajax()
+        // suc的返回值（ajax请求到的，后端给我们的数据）
+        return await http.get({
+            url: config.urlList.tagInfo,
+            // data: data   key 和 value 名字一样的时候，可以直接只写一个
+            data
+        })
+    }   
 
     async tagRecommend (data = {}) {
         let http = new Ajax()

js/utils/index.js

@@ -101,9 +101,6 @@ class Utils {
         if (r != null) return decodeURIComponent(r[2]); return null;
     }
 
-    
-
-
     header(content, action, back = `<i class="iconfont icon-fanhui"></i>`) {
         this.$("body").insertAdjacentHTML('afterbegin', `
          <div class="header fixed flex ais flex1 border-box p15">
@@ -118,6 +115,19 @@ class Utils {
         }
     }
 
+    // 滚动到底部实现自动加载下一页数据
+    onscroll(callback) {
+        window.onscroll = async () => {
+            var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+            var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
+
+            if (clientHeight + Math.ceil(scrollTop) >= scrollHeight) {
+              callback()
+            }
+        }
+    }
+
 
     async navShare(title = "", text = "", url = "") {
         console.log(navigator.share && navigator.canShare);
@@ -151,7 +161,12 @@ class Utils {
 }
 
 let u = new Utils
-let util = u, { $, item, query, navShare, getItem, setItem } = u
+let util = u, 
+{ 
+    $, item, query, navShare, 
+    getItem, setItem, onscroll
+} 
+= u
 
 // let util = new Utils
 // let $ = (new Utils).$

page/domestic.html

@@ -7,7 +7,7 @@
     <title>国产</title>
     <script src="../js/utils/rem.js"></script>
     <link rel="stylesheet" href="../css/tool/clear.css">
-    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4738996_raea6u0p92.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4738996_b8zp7vfi90h.css">
     <link rel="stylesheet" href="../css/tool/public.css">
 
     <link rel="stylesheet" href="../css/page/domestic.css">
@@ -16,12 +16,10 @@
 <body>
 
 
-    <div class="header fixed border-box flex ais js">
-      
-    </div>
-
     <div class="content">
-        国产
+        <ul class="type_list flex wrap p15">
+           
+        </ul>
     </div>
 
     
@@ -30,8 +28,7 @@
 <script src="../js/utils/index.js"></script>
 <script src="../js/config/index.js"></script>
 <script src="../js/http/index.js"></script>
-<script src="../js/serve/home.js"></script>
+<script src="../js/serve/tag.js"></script>
-<script src="../js/serve/info.js"></script>
 <script src="../js/page/domestic.js"></script>
 
 </html>

page/tagListInfo.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/tool/clear.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4738996_b8zp7vfi90h.css">
+    <link rel="stylesheet" href="../css/tool/public.css">
+    <link rel="stylesheet" href="../css/page/tagListInfo.css">
+</head>
+
+<body>
+
+    <div class="content">
+        <div class="recommend-model default-model">
+            <ul class="flex list p15 js"></ul>
+        </div>
+    </div>
+
+</body>
+<script src="../js/utils/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/tag.js"></script>
+<script src="../js/page/tagListInfo.js"></script>
+
+</html>

笔记.md

@@ -24,3 +24,7 @@ ajax 请求一般会有三个状态码
     code == 404 ：不返回数据给前端页面，但需要toast提示用户
     code == 500 ：不返回数据给前端页面，但需要弹窗提示用户！
     code == 403 ：不返回数据给前端页面，但需要弹窗提示用户，强制用户进行某些操作！
+
+TODO 作业：
+  热门
+  我的