first commit
This commit is contained in:
编码猿
322
h5/js/page/home.js
Normal file
322
h5/js/page/home.js
Normal file
@@ -0,0 +1,322 @@
|
||||
class Home {
|
||||
|
||||
constructor() {
|
||||
this.TabsDatas = [];
|
||||
this.list = [];
|
||||
this.PageSwiper = null;
|
||||
this.CurrentPage = 0;
|
||||
// 点击搜索进入搜索页面
|
||||
document.querySelector(".search").onclick = () => {
|
||||
location.href = "./search.html"
|
||||
}
|
||||
|
||||
// 通过在本地保存一个变量 homeIndex，记录用户在首页当前浏览到哪个分类，
|
||||
// 然后从其他页面回首页，那么根据本地变量 homeIndex 的数值，再回到上次浏览的分类
|
||||
if (localStorage.getItem("homeIndex") != null) {
|
||||
this.CurrentPage = localStorage.getItem("homeIndex")
|
||||
}
|
||||
|
||||
this.GetTypeData().then(() => this.GetIndexData())
|
||||
}
|
||||
|
||||
// 获取分类的数据，并渲染页面
|
||||
async GetTypeData() {
|
||||
if (localStorage.getItem("typeList") == null) {
|
||||
// 获取分类数据
|
||||
this.list = (await homeService.type({})).principal;
|
||||
localStorage.setItem("typeList", JSON.stringify(this.list))
|
||||
} else {
|
||||
this.list = JSON.parse(localStorage.getItem("typeList"))
|
||||
}
|
||||
|
||||
console.log("this.list ============== :", this.list);
|
||||
// 根据分类的数组长度遍历生成与分类对应的内容
|
||||
this.list.forEach((v, i) => {
|
||||
this.TabsDatas.push({
|
||||
id: v.id,
|
||||
title: v.title,
|
||||
page: 0,
|
||||
TotalPage: 0,
|
||||
content: []
|
||||
})
|
||||
document.querySelector(".s-wrapper").innerHTML +=
|
||||
`
|
||||
<div class="s-slide">
|
||||
<div class="list_content item_list padding_30">
|
||||
<ul>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
|
||||
// 为每一个内容绑定滚动事件
|
||||
var slide = document.querySelectorAll(".s-wrapper .s-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.TabsDatas[i - 1].page += 1;
|
||||
if (self.TabsDatas[i - 1].page <= self.TabsDatas[i - 1].TotalPage) {
|
||||
self.GetTypeInfoData(i)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 向数据中追加首页
|
||||
this.list.unshift({ id: -1, title: '首页' });
|
||||
// 根据数据生成横向菜单
|
||||
var MenuList = document.querySelector(".menu_list");
|
||||
this.list.forEach((v, i) => {
|
||||
MenuList.innerHTML += `
|
||||
<li class="${i == this.CurrentPage ? 'menu_active' : ''}">${v.title}</li>
|
||||
`
|
||||
});
|
||||
|
||||
|
||||
// 如果本地有 homeIndex，那么从其他页面返回的时候将顶部菜单滚动到对应位置
|
||||
if (localStorage.getItem("homeIndex") != null) {
|
||||
var offsetLeft = document.querySelectorAll(".menu_list li")[this.CurrentPage].offsetLeft - 14;
|
||||
document.querySelector(".menu_list").scrollLeft = offsetLeft
|
||||
}
|
||||
|
||||
// 横向菜单被点击的时候
|
||||
var mLi = document.querySelectorAll(".menu_list li")
|
||||
mLi.forEach((v, i) => {
|
||||
v.onclick = (e) => {
|
||||
this.SetUrl(i)
|
||||
|
||||
// 使横向菜单滑动
|
||||
document.querySelector(".menu_list").scrollLeft = e.target.offsetLeft - 14
|
||||
|
||||
// 清除激活样式
|
||||
mLi.forEach(d => d.className = "")
|
||||
// 添加激活样式
|
||||
v.className = "menu_active"
|
||||
this.PageSwiper.slideTo(i)
|
||||
// 请求用户点击的分类的列表数据
|
||||
if (this.list[i].id != -1 && this.TabsDatas[i - 1].content.length == 0) {
|
||||
this.GetTypeInfoData(i)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
this.initPageSwiper();
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化页面切换的轮播
|
||||
*/
|
||||
initPageSwiper() {
|
||||
this.PageSwiper = new swiper('.s-container', {
|
||||
time: 3,
|
||||
wrapper: '.s-wrapper',
|
||||
slide: '.s-slide',
|
||||
auto: false,
|
||||
speed: 300,
|
||||
on: {
|
||||
slideChangeTransitionStart: (index) => {
|
||||
this.SetUrl(index)
|
||||
// 获取所有菜单的li标签
|
||||
var MenuLi = document.querySelectorAll(".menu_list li");
|
||||
// 清除激活样式
|
||||
MenuLi.forEach(v => v.className = "")
|
||||
// 添加激活样式
|
||||
MenuLi[index].className = "menu_active"
|
||||
// 页面滚动的时候顶部菜单也移动位置
|
||||
document.querySelector(".menu_list").scrollLeft = MenuLi[index].offsetLeft - 14;
|
||||
// 请求用户点击的分类的列表数据
|
||||
if (this.list[index].id != -1 && this.TabsDatas[index - 1].content.length == 0) {
|
||||
this.GetTypeInfoData(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 必须在轮播图初始化后才去请求跳转到对应的页面和请求页面数据
|
||||
if (this.CurrentPage != 0) {
|
||||
this.GetTypeInfoData(this.CurrentPage)
|
||||
this.PageSwiper.slideTo(this.CurrentPage)
|
||||
}
|
||||
}
|
||||
|
||||
// 修改地址栏id参数为下标，然后重新进入首页的时候，直接继续进入上次访问分类
|
||||
SetUrl(index) {
|
||||
// 本地保存下标
|
||||
localStorage.setItem("homeIndex", index)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取分类下的列表数据
|
||||
*/
|
||||
async GetTypeInfoData(index) {
|
||||
|
||||
var res = await homeService.classList({
|
||||
page: this.TabsDatas[index - 1].page,
|
||||
id: this.TabsDatas[index - 1].id
|
||||
});
|
||||
this.TabsDatas[index - 1].page = res.current_page;
|
||||
this.TabsDatas[index - 1].TotalPage = res.total_page;
|
||||
this.TabsDatas[index - 1].content = [
|
||||
...this.TabsDatas[index - 1].content,
|
||||
...res.data
|
||||
];
|
||||
|
||||
var sWrapper = document.querySelectorAll(".s-wrapper .s-slide .list_content ul")
|
||||
res.data.forEach((v) => {
|
||||
sWrapper[index - 1].innerHTML += `
|
||||
<li>
|
||||
<div class="newest_img">
|
||||
<a href="./info.html?id=${v.id}">
|
||||
<img src="${v.preview}" alt="${v.title}">
|
||||
</a>
|
||||
<span>${v.total}P</span>
|
||||
</div>
|
||||
<div class="newest_text">
|
||||
<a href="./info.html?id=${v.id}">
|
||||
<p class="t">${v.title}</p>
|
||||
<p class="source">${v.user}</p>
|
||||
<p class="source">${v.source}</p>
|
||||
</a>
|
||||
<div class="tags">
|
||||
${(v.tags.map((t) => {
|
||||
return `<div class="tags_item">
|
||||
<a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a>
|
||||
</div>`
|
||||
})).toString().replace(/,/ig, " ")
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
});
|
||||
}
|
||||
|
||||
// 获取首页的数据，并渲染各个布局
|
||||
async GetIndexData() {
|
||||
// 获取首页的数据
|
||||
var list = await homeService.GetHomeData({});
|
||||
// 轮播图模特的数据
|
||||
var ModelList = list.model.res;
|
||||
// 最新收录
|
||||
var newestList = list.newest.data;
|
||||
// 今日推荐
|
||||
var recommendedList = list.recommended.data;
|
||||
|
||||
var swiperWrapper = document.querySelector(".swiper-wrapper");
|
||||
// 根据数据遍历生成banner 的 swiper-slide
|
||||
var slideElement = [];
|
||||
[1, 2].forEach(() => {
|
||||
var o = document.createElement("div");
|
||||
o.className = "swiper-slide";
|
||||
slideElement.push(o)
|
||||
})
|
||||
ModelList.forEach((v, i) => {
|
||||
if (i <= 3) {
|
||||
slideElement[0].innerHTML +=
|
||||
`<div class="item">
|
||||
<a href="./model_info.html?id=${v.id}&t=${v.title}">
|
||||
<div class="top">
|
||||
<img src="${v.preview}" alt="">
|
||||
<span>${v.total}</span>
|
||||
</div>
|
||||
<p>${v.title}</p>
|
||||
</a>
|
||||
</div>`
|
||||
} else {
|
||||
slideElement[1].innerHTML +=
|
||||
`<div class="item">
|
||||
<a href="./model_info.html?id=${v.id}&t=${v.title}">
|
||||
<div class="top">
|
||||
<img src="${v.preview}" alt="">
|
||||
<span>${v.total}</span>
|
||||
</div>
|
||||
<p>${v.title}</p>
|
||||
</a>
|
||||
</div>`
|
||||
}
|
||||
})
|
||||
// 将 swiper-slide 填入页面中
|
||||
slideElement.forEach(v => swiperWrapper.appendChild(v))
|
||||
|
||||
new swiper('.swiper-container', {
|
||||
time: 3,
|
||||
auto: false,
|
||||
speed: 800
|
||||
});
|
||||
|
||||
|
||||
// 遍历 最新收录
|
||||
document.querySelector(".newest .title").innerHTML = `
|
||||
<i class="iconfont icon-huo color_theme"></i>
|
||||
最新收录
|
||||
`;
|
||||
newestList.forEach(v => {
|
||||
document.querySelector(".newest ul").innerHTML +=
|
||||
`
|
||||
<li>
|
||||
<div class="newest_img">
|
||||
<a href="./info.html?id=${v.id}">
|
||||
<img src="${v.preview}" alt="${v.title}">
|
||||
</a>
|
||||
<span>${v.total_page}套</span>
|
||||
</div>
|
||||
<div class="newest_text">
|
||||
<a href="./info.html?id=${v.id}">
|
||||
<p class="t">${v.title}</p>
|
||||
<p class="source">${v.user}</p>
|
||||
<p class="source">${v.source}</p>
|
||||
</a>
|
||||
<div class="tags">
|
||||
${(v.tags.map((t) => {
|
||||
return `<div class="tags_item">
|
||||
<a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a>
|
||||
</div>`
|
||||
})).toString().replace(/,/ig, " ")
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
|
||||
// 今日推荐
|
||||
document.querySelector(".recommended .title").innerHTML = `
|
||||
<i class="iconfont icon-tuijian color_theme"></i>
|
||||
今日推荐
|
||||
`;
|
||||
recommendedList.forEach(v => {
|
||||
document.querySelector(".recommended ul").innerHTML +=
|
||||
`
|
||||
<li>
|
||||
<div class="newest_img">
|
||||
<a href="./info.html?id=${v.id}">
|
||||
<img src="${v.preview}" alt="${v.title}">
|
||||
</a>
|
||||
<span>${v.total_page}套</span>
|
||||
</div>
|
||||
<div class="newest_text">
|
||||
<a href="./info.html?id=${v.id}">
|
||||
<p class="t">${v.title}</p>
|
||||
<p class="source">${v.user}</p>
|
||||
<p class="source">${v.source}</p>
|
||||
</a>
|
||||
<div class="tags">
|
||||
${(v.tags.map((t) => {
|
||||
return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
|
||||
})).toString().replace(/,/ig, " ")
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
var home = new Home();
|
||||
Reference in New Issue
Block a user