99 lines
2.6 KiB
JavaScript
99 lines
2.6 KiB
JavaScript
// 形成独立作用于
|
|
(function () {
|
|
|
|
// 顶部导航菜单
|
|
var headerMenu = [
|
|
{ title: '头条', type: 'top' },
|
|
{ title: '社会', type: 'shehui' },
|
|
{ title: '国内', type: 'guoji' },
|
|
{ title: '娱乐', type: 'yule' },
|
|
{ title: '体育', type: 'tiyu' },
|
|
{ title: '军事', type: 'junshi' },
|
|
{ title: '科技', type: 'keji' },
|
|
{ title: '财经', type: 'caijing' },
|
|
{ title: '时尚', type: 'shishang' }
|
|
];
|
|
|
|
// ajax 获取数据 type 分类的拼音名
|
|
function GetData(type) {
|
|
ajax({
|
|
data: {
|
|
type: type
|
|
},
|
|
success: function (res) {
|
|
RenderList(res.result.data)
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 根据你传递过来的数据，帮你渲染新闻列表页面
|
|
* @param {*} list
|
|
*/
|
|
function RenderList (list) {
|
|
document.querySelector(".content").innerHTML = ""
|
|
list.forEach(function(val){
|
|
// 如果是两张图和三张图的情况统一使用三张图的html布局
|
|
if(val.hasOwnProperty("thumbnail_pic_s02")) {
|
|
document.querySelector(".content").innerHTML +=`
|
|
<div class="list-item-two">
|
|
<div class="item-text">
|
|
<h3>${val.title}</h3>
|
|
</div>
|
|
<div class="img-list">
|
|
<img src="${val.thumbnail_pic_s}">
|
|
<img src="${val.thumbnail_pic_s02}">
|
|
${val.hasOwnProperty("thumbnail_pic_s03") ? `<img src="${val.thumbnail_pic_s03}">` : ''}
|
|
</div>
|
|
<p>${val.author_name} ${val.category} ${val.date}</p>
|
|
</div>
|
|
`
|
|
|
|
// 一张图的布局
|
|
} else {
|
|
document.querySelector(".content").innerHTML +=`
|
|
<div class="list-item">
|
|
<div class="item-text">
|
|
<h3>${val.title}</h3>
|
|
<p>${val.author_name} ${val.category} ${val.date}</p>
|
|
</div>
|
|
<img src="${val.thumbnail_pic_s}" alt="${val.title}">
|
|
</div>`
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
/**
|
|
* 渲染顶部横向的菜单
|
|
*/
|
|
function RenderMenu () {
|
|
headerMenu.forEach(function(val,index){
|
|
document.querySelector(".header_menu ul").innerHTML += `
|
|
<li class="${index == 0 ? 'active': ''}">${val.title}</li>
|
|
`
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 菜单被点击的时候切换激活样式，并请求对应数据。
|
|
*/
|
|
function changeMenu() {
|
|
var MenuLi = document.querySelectorAll(".header_menu ul li");
|
|
MenuLi.forEach(function(val,index){
|
|
val.onclick = function () {
|
|
MenuLi.forEach(function(vas){
|
|
vas.className = ""
|
|
})
|
|
|
|
GetData(headerMenu[index].type)
|
|
val.className = "active"
|
|
}
|
|
})
|
|
}
|
|
|
|
RenderMenu()
|
|
changeMenu()
|
|
GetData('top')
|
|
|
|
})() |