first commit
This commit is contained in:
136
js/page/domestic.js
Normal file
136
js/page/domestic.js
Normal file
@@ -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
|
||||
7
js/page/hot.js
Normal file
7
js/page/hot.js
Normal file
@@ -0,0 +1,7 @@
|
||||
class Hot {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
new Hot
|
||||
79
js/page/index.js
Normal file
79
js/page/index.js
Normal file
@@ -0,0 +1,79 @@
|
||||
class Index {
|
||||
constructor() {
|
||||
|
||||
header(`
|
||||
<div class="search flex1 flex ais">
|
||||
<i class="iconfont icon-sousuo-m"></i>
|
||||
<p>开启精彩搜索..</p>
|
||||
</div>
|
||||
`, '', '')
|
||||
// 虚拟dom（js对象），虚拟dom的数组（[{},{}]）
|
||||
|
||||
// 数组（不是原生数组，是jq定义的数组）
|
||||
// console.log($("body")[0].innerHTML = ``);
|
||||
// console.log($("body").html(`a`));
|
||||
footer()
|
||||
|
||||
this.getHomeBannerData()
|
||||
this.getHomeHotData()
|
||||
this.getHomeListData()
|
||||
this.getTagRecommendData()
|
||||
|
||||
this.event()
|
||||
}
|
||||
|
||||
event() {
|
||||
$(".search").click(() => {
|
||||
location.href = "./search.html"
|
||||
})
|
||||
}
|
||||
|
||||
async getTagRecommendData() {
|
||||
eachHtml(
|
||||
".recommend-tag",
|
||||
await tagServe.tagRecommend(),
|
||||
(v) => `
|
||||
<li>
|
||||
<a class="icon" href="./tagListInfo.html?url=${v.url}&title=${v.title}">${v.title.substr(0,1)}</a>
|
||||
<a class="title" href="./tagListInfo.html?url=${v.url}&title=${v.title}">${v.title}</a>
|
||||
</li>
|
||||
`
|
||||
)
|
||||
}
|
||||
|
||||
async getHomeBannerData() {
|
||||
eachHtml(
|
||||
".swiper-wrapper",
|
||||
await homeServe.homeBanner(),
|
||||
(v) => `<div class="swiper-slide"><img src="${v.src}" alt=""></div>`
|
||||
)
|
||||
this.initSwiper()
|
||||
}
|
||||
|
||||
async getHomeListData() {
|
||||
eachHtml(
|
||||
".default-model ul",
|
||||
await homeServe.homeList(),
|
||||
(v) => item(v)
|
||||
)
|
||||
}
|
||||
|
||||
async getHomeHotData() {
|
||||
eachHtml(
|
||||
".recommend-horizontally ul",
|
||||
await homeServe.homeHot(),
|
||||
(v) => item(v)
|
||||
)
|
||||
}
|
||||
|
||||
initSwiper() {
|
||||
new Swiper('.banner', {
|
||||
loop: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
new Index
|
||||
97
js/page/info.js
Normal file
97
js/page/info.js
Normal file
@@ -0,0 +1,97 @@
|
||||
class Info {
|
||||
title = "";
|
||||
defaultArr = []
|
||||
allArr = [];
|
||||
like = JSON.parse(localStorage.getItem("like")) || [];
|
||||
constructor() {
|
||||
this.init()
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.getInfoListData()
|
||||
header(
|
||||
`<div class="header_title flex1 ellipsis">${this.title}</div>`,
|
||||
`
|
||||
<div class="ilist">
|
||||
<i class="iconfont icon-wujiaoxing"></i>
|
||||
<i class="iconfont icon-fenxiang"></i>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
this.event()
|
||||
}
|
||||
|
||||
async getInfoListData() {
|
||||
let { title, src_list, recommend } = await infoServe.infoList({
|
||||
id: query("id")
|
||||
})
|
||||
this.title = title
|
||||
|
||||
this.defaultArr = src_list.splice(0, 2)
|
||||
this.allArr = src_list
|
||||
|
||||
eachHtml(
|
||||
".info_img_list .img_list",
|
||||
this.defaultArr,
|
||||
(v) => `<img src="${v}" alt="">`
|
||||
)
|
||||
|
||||
|
||||
eachHtml(
|
||||
".default-model ul",
|
||||
recommend,
|
||||
(v) => item(v)
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
event() {
|
||||
|
||||
this.like.filter(v => v.id == query("id")).length != 0
|
||||
? $(".icon-wujiaoxing").addClass("icon-wujiaoxing1")
|
||||
: null
|
||||
|
||||
|
||||
$(".icon-fenxiang").click(async () => {
|
||||
await navigator.clipboard.writeText(`
|
||||
我这有个好看的，快来看看 ${this.title}
|
||||
${location.href}
|
||||
`)
|
||||
alert("内容已复制")
|
||||
})
|
||||
|
||||
|
||||
$(".icon-wujiaoxing").click(() => {
|
||||
// 如果有icon-wujiaoxing1，表示收藏过了
|
||||
if ($(".icon-wujiaoxing").hasClass("icon-wujiaoxing1")) {
|
||||
this.like = this.like.filter(v => v.id != query("id"))
|
||||
// 没有 icon-wujiaoxing1，表示未收藏过了
|
||||
} else {
|
||||
this.like.push({
|
||||
"id": query("id"),
|
||||
"thumbnail": this.defaultArr[0],
|
||||
"title": this.title,
|
||||
"time": query("time"),
|
||||
"view": "42"
|
||||
})
|
||||
}
|
||||
|
||||
localStorage.setItem("like", JSON.stringify(this.like))
|
||||
|
||||
$(".icon-wujiaoxing").toggleClass("icon-wujiaoxing1")
|
||||
})
|
||||
|
||||
|
||||
$(".view_all").click(() => {
|
||||
$(".img_list").css({ height: 'auto' })
|
||||
eachHtml(
|
||||
".info_img_list .img_list",
|
||||
this.allArr,
|
||||
(v) => `<img src="${v}" alt="">`
|
||||
)
|
||||
$(".view_all").css({ display: 'none' })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
new Info
|
||||
6
js/page/me.js
Normal file
6
js/page/me.js
Normal file
@@ -0,0 +1,6 @@
|
||||
class Me {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
||||
new Me
|
||||
76
js/page/search.js
Normal file
76
js/page/search.js
Normal file
@@ -0,0 +1,76 @@
|
||||
class Search {
|
||||
page = 1;
|
||||
totalPage = 0;
|
||||
keyword = "";
|
||||
constructor() {
|
||||
header(
|
||||
`<input class="flex1" type="text" placeholder="输入关键字">`,
|
||||
`<div class="button">搜索</div>`,
|
||||
`<i class="iconfont icon-fanhui"></i>`
|
||||
)
|
||||
|
||||
this.getSearchHotData()
|
||||
|
||||
this.enevt()
|
||||
}
|
||||
|
||||
|
||||
async getSearchHotData() {
|
||||
let { hotKeyword, recommend } = await searchServe.searchHot()
|
||||
eachHtml(
|
||||
'.search_list ul',
|
||||
hotKeyword,
|
||||
(v) => `<li><a>${v}</a></li>`
|
||||
)
|
||||
|
||||
$(".search_list ul li").click(function () {
|
||||
$(".header input").val($(this).text())
|
||||
$(".header .button").click()
|
||||
})
|
||||
|
||||
|
||||
eachHtml(
|
||||
'.search_recommend',
|
||||
recommend,
|
||||
(v) => item(v, 2)
|
||||
)
|
||||
}
|
||||
|
||||
async getSearchKeyData() {
|
||||
|
||||
let { totalPage, list } = await searchServe.searchKey({
|
||||
keyword: this.keyword,
|
||||
page: this.page
|
||||
})
|
||||
|
||||
this.totalPage = totalPage
|
||||
|
||||
eachHtml(
|
||||
'.have-search ul',
|
||||
list,
|
||||
(v) => item(v)
|
||||
)
|
||||
|
||||
$(".no-search").hide()
|
||||
$(".have-search").show()
|
||||
}
|
||||
|
||||
|
||||
enevt() {
|
||||
$(".header .button").click(async () => {
|
||||
if ($(".header input").val().length != 0) {
|
||||
this.keyword = $(".header input").val()
|
||||
await this.getSearchKeyData()
|
||||
}
|
||||
})
|
||||
|
||||
$(".header input").on("input", function () {
|
||||
if ($(".header input").val().length == 0) {
|
||||
$(".no-search").show()
|
||||
$(".have-search").hide()
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
new Search
|
||||
6
js/page/tagListInfo.js
Normal file
6
js/page/tagListInfo.js
Normal file
@@ -0,0 +1,6 @@
|
||||
class TagListInfo {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
||||
new TagListInfo
|
||||
Reference in New Issue
Block a user