136 lines
3.9 KiB
JavaScript
136 lines
3.9 KiB
JavaScript
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 |