130 lines
4.1 KiB
JavaScript
130 lines
4.1 KiB
JavaScript
class Index {
|
||
constructor() {
|
||
this.index = 0;
|
||
this.principa = []
|
||
footer();
|
||
this.initSwiper();
|
||
this.getType().then(() => this.getIndex());
|
||
|
||
|
||
}
|
||
|
||
async getType() {
|
||
|
||
// 本地无数值，那么发送请求
|
||
if (localStorage.getItem("principal") == null) {
|
||
var { principal, additional } = await indexService.type()
|
||
localStorage.setItem("principal", JSON.stringify(principal))
|
||
localStorage.setItem("additional", JSON.stringify(additional))
|
||
} else {
|
||
var principal = JSON.parse(localStorage.getItem("principal"))
|
||
var additional = JSON.parse(localStorage.getItem("additional"))
|
||
}
|
||
|
||
|
||
|
||
this.principal = principal;
|
||
|
||
console.log(this.principal);
|
||
|
||
// TODO 改造这个代码，实现下面的作业
|
||
this.principal.forEach((v, i) => {
|
||
$(".header_menu ul").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`;
|
||
$(".swiper .swiper-wrapper").innerHTML += `
|
||
<div class="swiper-slide">
|
||
<div class="list">
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
|
||
click(".header_menu ul li", (v, i) => {
|
||
_(".header_menu ul li").forEach(v => v.classList.remove("active"))
|
||
v.classList.add("active")
|
||
this.index = i
|
||
this.getClassList()
|
||
this.mySwiper.slideTo(i)
|
||
})
|
||
|
||
_(".swiper .swiper-wrapper .swiper-slide").forEach((v,i) => {
|
||
if (i != 0) {
|
||
v.onscroll = () => {
|
||
const {clientHeight, scrollHeight, scrollTop} = v;
|
||
var distance = scrollHeight- scrollTop - clientHeight;
|
||
if (distance <= 0.5) {
|
||
this.principal[this.index].page += 1
|
||
if (this.principal[this.index].page <= this.principal[this.index].total_page) {
|
||
this.getClassList("loadMore")
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
// 作业：在utils里面 实现下面这种封装
|
||
// principal.html(".header_menu ul", (v,i) => {
|
||
// return `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
|
||
// })
|
||
}
|
||
|
||
async getIndex() {
|
||
var res = await indexService.index()
|
||
this.principal[this.index].content = res.list
|
||
item(
|
||
_(".swiper .swiper-wrapper .swiper-slide .list")[this.index],
|
||
this.principal[this.index].content
|
||
)
|
||
}
|
||
|
||
async getClassList(type = "click") {
|
||
|
||
|
||
var getList = async () => {
|
||
var res = await indexService.classList({
|
||
page: this.principal[this.index].page,
|
||
id: this.principal[this.index].id
|
||
});
|
||
this.principal[this.index].content = [
|
||
...this.principal[this.index].content,
|
||
...res.data
|
||
]
|
||
this.principal[this.index].total_page = res.total_page
|
||
console.log("getClassList: ", this.principal);
|
||
|
||
// 渲染页面（注意：把指定数组下标的content渲染到对应下标的 swiper-slide）
|
||
item(
|
||
_(".swiper .swiper-wrapper .swiper-slide .list")[this.index],
|
||
this.principal[this.index].content
|
||
)
|
||
}
|
||
|
||
|
||
if (type == "click") {
|
||
if (this.principal[this.index].content.length == 0 && this.index != 0) {
|
||
getList();
|
||
}
|
||
} else {
|
||
getList();
|
||
}
|
||
}
|
||
|
||
|
||
initSwiper() {
|
||
var self = this;
|
||
this.mySwiper = new Swiper('.swiper', {
|
||
direction: 'horizontal',
|
||
on: {
|
||
slideChangeTransitionEnd: function () {
|
||
_(".header_menu ul li").forEach(v => v.classList.remove("active"))
|
||
_(".header_menu ul li")[this.activeIndex].classList.add("active")
|
||
|
||
self.index = this.activeIndex
|
||
self.getClassList()
|
||
},
|
||
},
|
||
})
|
||
}
|
||
}
|
||
|
||
new Index() |