139 lines
4.2 KiB
JavaScript
139 lines
4.2 KiB
JavaScript
class Index {
|
||
constructor() {
|
||
// 横向菜单的下标
|
||
this.index = 0;
|
||
// 默认横向菜单的数据
|
||
this.principal = []
|
||
footer()
|
||
this.getClassApi();
|
||
}
|
||
|
||
async getClassApi() {
|
||
// 第一次打开app，本地没有缓存，发送请求获取菜单
|
||
if (localStorage.getItem("principal") == null) {
|
||
// 请求横向 菜单的数据
|
||
var res = await index.classApi();
|
||
localStorage.setItem("principal", JSON.stringify(res.principal));
|
||
localStorage.setItem("additional", JSON.stringify(res.additional));
|
||
this.principal = res.principal
|
||
|
||
// 第二次打开，本地已经有缓存了， 直接使用本地缓存过的菜单数据
|
||
} else {
|
||
this.principal = JSON.parse(localStorage.getItem("principal"))
|
||
}
|
||
|
||
// 渲染生成横向菜单和对应的内容
|
||
this.principal.forEach((v,i) => {
|
||
|
||
// 生成横向菜单
|
||
$(".header_menu ul").innerHTML += `
|
||
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>
|
||
`;
|
||
|
||
// 生成横向菜单对应列表内容
|
||
if (i > 0) {
|
||
$(".swiper-wrapper").innerHTML += `
|
||
<div class="swiper-slide">${v.title}</div>
|
||
`
|
||
}
|
||
|
||
});
|
||
|
||
|
||
// 为每一个内容绑定滚动事件
|
||
var slide = _(".swiper-wrapper .swiper-slide");
|
||
var self = this;
|
||
slide.forEach((v, i) => {
|
||
if (i > 0) {
|
||
v.addEventListener('scroll', function () {
|
||
if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
|
||
self.principal[self.index].page += 1;
|
||
if (self.principal[self.index].page <= self.principal[self.index].total_page) {
|
||
console.log("请求数据")
|
||
self.getClassList("loadMore")
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
|
||
// 初始化页面内容的轮播图
|
||
var self = this;
|
||
var mySwiper = new Swiper ('.swiper', {
|
||
direction: 'horizontal',
|
||
on: {
|
||
slideChangeTransitionEnd: function(){
|
||
self.changeActive(this.activeIndex)
|
||
self.getClassList();
|
||
},
|
||
},
|
||
})
|
||
|
||
// 为菜单的li标签绑定点击事件
|
||
var liArr = _(".header_menu ul li")
|
||
liArr.forEach((v,i) => {
|
||
v.onclick = () => {
|
||
this.changeActive(i)
|
||
mySwiper.slideTo(i)
|
||
}
|
||
})
|
||
|
||
this.getIndex();
|
||
}
|
||
|
||
async getIndex() {
|
||
var res = await index.indexList();
|
||
|
||
var slide = _(".swiper-wrapper .swiper-slide");
|
||
|
||
item(slide[this.index],res.list)
|
||
}
|
||
|
||
async getClassList(type = "click") {
|
||
|
||
var loadData = async () => {
|
||
var res = await index.classList({
|
||
id: this.principal[this.index].id,
|
||
page: this.principal[this.index].page
|
||
})
|
||
|
||
this.principal[this.index].total_page = res.total_page;
|
||
// res.data.forEach(v => {
|
||
// this.principal[this.index].content.push(v)
|
||
// })
|
||
|
||
this.principal[this.index].content = [
|
||
...this.principal[this.index].content,
|
||
...res.data
|
||
];
|
||
|
||
console.log("this.principal[this.index]: ", this.principal[this.index])
|
||
var slide = _(".swiper-wrapper .swiper-slide");
|
||
item(slide[this.index], res.data)
|
||
}
|
||
|
||
if (this.principal[this.index].id != -1) {
|
||
// 滚动加载更多
|
||
if (type == "loadMore") {
|
||
loadData();
|
||
// 点击 和 滑动页面
|
||
} else {
|
||
if (this.principal[this.index].content.length == 0) {
|
||
loadData();
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
changeActive(index) {
|
||
this.index = index;
|
||
var liArr = _(".header_menu ul li")
|
||
liArr.forEach(item => item.classList.remove("active"))
|
||
liArr[index].classList.add("active")
|
||
}
|
||
}
|
||
|
||
|
||
new Index(); |