141 lines
4.8 KiB
JavaScript
141 lines
4.8 KiB
JavaScript
class Index {
|
||
constructor () {
|
||
this.index = 0;
|
||
this.principal = [] //定义两个全局变量下标和数组
|
||
|
||
footer(); //调用底部菜单
|
||
this.getClassList() //调用
|
||
}
|
||
|
||
//调用 getClassList接口
|
||
async getClassList() {
|
||
var self = this;
|
||
var res = await indexServe.classList();
|
||
console.log(res);
|
||
this.principal = res.principal
|
||
|
||
|
||
this.principal.forEach((v,i) => {
|
||
$(".header_menu ul").html(`
|
||
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>
|
||
`) //对this.principal 进行遍历 向.header_menu ul里面添加li li的数据就是v.title
|
||
|
||
$(".page_wrapper").html(`
|
||
<div class="swiper-slide">
|
||
<div class="list">
|
||
</div>
|
||
</div>
|
||
`); //向page_wrapper添加swiper-slide（也就是父容器）
|
||
|
||
_(".swiper-wrapper .swiper-slide").forEach(v => {
|
||
v.onscroll = () => {
|
||
const {clientHeight, scrollHeight, scrollTop} = v;
|
||
const distance = scrollHeight- scrollTop - clientHeight;
|
||
if(distance <= 0) {
|
||
// 首页
|
||
console.log("滚动到底部...");
|
||
if (this.index == 0) {
|
||
this.getIndex()
|
||
} else {
|
||
this.principal[this.index].page += 1
|
||
if (this.principal[this.index].page <= this.principal[this.index].total_page) {
|
||
this.getClassListArr("more")
|
||
} else {
|
||
console.log("已经没有数据了！！！");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
click($('.header_menu i'), function () {
|
||
console.log(this);
|
||
})
|
||
|
||
click(_(".header_menu ul li"), function () {
|
||
self.changeActive(this.index)
|
||
})
|
||
|
||
this.getIndex()
|
||
this.initPage()
|
||
}
|
||
|
||
//点击分类的方法
|
||
async getClassListArr(type = "click") {
|
||
var getData = async () => {
|
||
var res = await indexServe.classListArr({
|
||
page: this.principal[this.index].page,
|
||
id: this.principal[this.index].id
|
||
//数组的参数通过数组加下标的方式拿到
|
||
});
|
||
|
||
this.principal[this.index].total_page = res.total_page
|
||
//为数组里面添加个总页面total_page
|
||
|
||
this.principal[this.index].content = [
|
||
...this.principal[this.index].content,
|
||
...res.data //向content添加数组以及返回的新数组
|
||
];
|
||
|
||
item(
|
||
_(".swiper-slide .list")[this.index],
|
||
// this.principal[this.index].content
|
||
res.data
|
||
) //调用item父元素加数据
|
||
}
|
||
|
||
if (type == "click") {
|
||
if (this.principal[this.index].id != -1)
|
||
//如果数组中id不等于负一也就是不是首页
|
||
{
|
||
if (this.principal[this.index].content.length == 0)
|
||
//并且数组为0时
|
||
{
|
||
getData() //请求数据
|
||
}
|
||
}
|
||
} else {
|
||
getData()
|
||
}
|
||
}
|
||
//更改activ样式
|
||
changeActive(index) {
|
||
this.index = index
|
||
_(".header_menu ul li").forEach(v => v.remove("active"))
|
||
// 对.header_menu ul li进行遍历先删除所有的active
|
||
_(".header_menu ul li")[index].add("active")
|
||
// 再通过数据加下标的方式给添加active
|
||
this.mySwiper.slideTo(index) //点击时页面跟着标题一起切换 必要参数为下标（index）
|
||
}
|
||
|
||
//调用index接口
|
||
async getIndex() {
|
||
var res = await indexServe.index();
|
||
this.principal[this.index].content = [ //数组加下标的方式存入数据组中的content
|
||
...this.principal[this.index].content,
|
||
...res.list
|
||
//...是指将数组中的元素都取出来
|
||
];
|
||
|
||
item(_(".swiper-slide .list")[this.index], res.list)
|
||
|
||
}
|
||
|
||
//页面轮播图
|
||
initPage() {
|
||
var self = this; //提前定义一个this
|
||
this.mySwiper = new Swiper('.swiper-container', { //定义一个mySwiper 加了this为全局变量
|
||
direction: 'horizontal', //切换水平滑动
|
||
on:{
|
||
slideNextTransitionEnd: function() {
|
||
//监听是否滑动结束
|
||
self.changeActive(this.activeIndex) //获取当前的滑动后的下标
|
||
self.getClassListArr()
|
||
},
|
||
},
|
||
})
|
||
}
|
||
}
|
||
|
||
new Index() |