140 lines
4.2 KiB
JavaScript
140 lines
4.2 KiB
JavaScript
class index {
|
||
constructor() {
|
||
this.principal = [];
|
||
this.index = localStorage.getItem("index") == null ? 0 : localStorage.getItem("index");
|
||
footer()
|
||
this.getIndexData();
|
||
this.GetType();
|
||
}
|
||
|
||
// 获取横向分类的数据
|
||
async GetType() {
|
||
var res;
|
||
// 第一次访问app，本地没有缓存的principal分类，所以发送请求去获取
|
||
if (localStorage.getItem("principal") == null) {
|
||
var data = await indexServe.type();
|
||
console.log("data === ", data);
|
||
res = data.principal
|
||
localStorage.setItem("principal", JSON.stringify(data.principal))
|
||
localStorage.setItem("additional", JSON.stringify(data.additional))
|
||
} else {
|
||
res = JSON.parse(localStorage.getItem("principal"))
|
||
}
|
||
|
||
this.principal = res;
|
||
|
||
this.principal.unshift({
|
||
id: -1,
|
||
page: 0,
|
||
title: "首页",
|
||
content: []
|
||
})
|
||
|
||
|
||
this.principal.forEach((v, i) => {
|
||
v.content = [];
|
||
// 渲染横向菜单
|
||
$(".header_menu ul").innerHTML += `<li class="${i == this.index ? 'active_menu' : ''}">${v.title}</li>`;
|
||
|
||
// 生成横向的轮播图
|
||
if (i != 0) {
|
||
$(".swiper-container .swiper-wrapper").innerHTML += `<div class="swiper-slide item_list"></div>`
|
||
}
|
||
});
|
||
|
||
OnScrollBottom(".swiper-wrapper .swiper-slide", async () => {
|
||
if (index != 0) {
|
||
this.principal[this.index].page++;
|
||
if (this.principal[this.index].page <= this.principal[this.index].total_page) {
|
||
await this.GetClassList("more")
|
||
if (this.principal[this.index].page == this.principal[this.index].total_page) {
|
||
_(".swiper-wrapper .swiper-slide")[this.index].innerHTML += `<p class="nodata">...暂无数据...</p>`
|
||
}
|
||
}
|
||
|
||
}
|
||
})
|
||
|
||
console.log(this.principal);
|
||
this.initSwiper();
|
||
}
|
||
|
||
initSwiper() {
|
||
|
||
|
||
// 改变激活样式的封装
|
||
function changeAction(index) {
|
||
_(".header_menu ul li").forEach(v => {
|
||
v.className = ""
|
||
});
|
||
_(".header_menu ul li")[index].className = "active_menu"
|
||
}
|
||
|
||
var page = new swiper(".swiper-container", {
|
||
time: 3,
|
||
on: {
|
||
slideChangeTransitionStart: (index) => {
|
||
this.index = index;
|
||
localStorage.setItem("index", this.index)
|
||
changeAction(index)
|
||
this.GetClassList()
|
||
}
|
||
}
|
||
});
|
||
|
||
_(".header_menu ul li").forEach((v, i) => {
|
||
v.onclick = () => {
|
||
this.index = i;
|
||
localStorage.setItem("index", this.index)
|
||
page.slideTo(i);
|
||
changeAction(i);
|
||
this.GetClassList()
|
||
}
|
||
});
|
||
|
||
if (localStorage.getItem("index") != null) {
|
||
this.GetClassList()
|
||
page.slideTo(this.index);
|
||
}
|
||
}
|
||
|
||
// type click 表示点击或者滑动
|
||
// more 表示滚动加载数据
|
||
async GetClassList(type = "click") {
|
||
var getData = async () => {
|
||
var res = await indexServe.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;
|
||
item(res.data, _(".swiper-wrapper .swiper-slide")[this.index])
|
||
|
||
}
|
||
if (this.index != 0) {
|
||
if (type == "click") {
|
||
if (this.principal[this.index].content == 0) {
|
||
await getData()
|
||
}
|
||
} else {
|
||
await getData()
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
async getIndexData() {
|
||
var res = await indexServe.index();
|
||
item(res.newest.data, $(".newest"))
|
||
item(res.recommended.data, $(".recommended"))
|
||
}
|
||
}
|
||
|
||
new index() |