今天主要对首页的侧边导航栏进行的数据渲染 ,另外商品列表页通过pagination插件 进行分页,并且通过请求数据来渲染分页器和页面。
代码如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pagi{
width: 1200px;
height: 100px;
margin: 0 auto;
border: 1px solid #333;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 1200px;
margin: 20px auto;
}
.box >ul{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box >ul >li{
width: 22%;
margin: 0 0 20px 20px;
border: 1px solid #333;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
flex-direction: column;
}
.box >ul>li >img{
width: 153px;
height: 206px;
display: block;
}
.box >ul>li >p{
font-size: 30px;
}
.sort{
width: 100px;
height: 40px;
font-size: 30px;
position: fixed;
top: 30px;
left: 30px;
}
</style>
<link rel="stylesheet" href="../lib/pagination/pagination.css">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/common.min.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
<link rel="stylesheet" href="../css/list.css">
</head>
<body>
<div class="layout-header-nav">
<div class="container">
<p class="header-benefit">
商城优惠大酬宾,全场满59元包邮
</p>
<div class="header-cart">
<a href="./cart.html" class="header-cart-link">
<div class="header-cart-button">
<div class="header-cart-button-img"></div>
<span class="header-cart-button-word">
购物车
</span>
</div>
</a>
</div>
<div class="header-nav">
<a href="./login.html" class="header-nav-item login">登录</a>
<span class="header-nav-item">|</span>
<a href="./register.html" class="header-nav-item">注册</a>
<span class="header-nav-item">|</span>
<a href="./cart.html" class="header-nav-item">我的订单</a>
<span class="header-nav-item">|</span>
<a href="#" class="header-nav-item">帮助中心</a>
<span class="header-nav-item">|</span>
<a href="#" class="header-nav-item">TP-LINK官网</a>
</div>>
</div>
</div>
<div class="layout-header-search">
<div class="container">
<a href="#">
<img src="" alt="" class="header-logo">
</a>
<div class="layout-banner-nav">
<div class="banner-nav-list">
<div class="container2">
</div>
</div>
</div>
<form action="" class="header-search">
<input type="text" class="header-search-input" autocomplete="off">
<input type="button" class="header-search-submit" value="">
</form>
</div>
</div>
<div class="nav_box">
<ul class="container">
</ul>
</div>
<button class="sort">排序</button>
<div class="box" style="display: flex;flex-wrap: wrap;">
<ul>
</ul>
</div>
<div class="pagi m-style"></div>
</body>
</html>
js
list.js
console.log($.cookie('name'));
console.log($('.login'));
$(function() {
if ($.cookie('name')) {
console.log('用户登录')
$('.login').text($.cookie('name'));
}else{
console.log('用户未登录')
}
})
$('.header-cart').hover(function(){
$('.header-cart').addClass("active")
},function (){
$('.header-cart').removeClass("active")
}
)
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
autoplay: {
delay: 1000
},
effect: 'fade',
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
getList()
function getList() {
$.ajax({
url: '../lib/nav_top.json',
dataType: 'json',
success: function (res) {
console.log(res)
// 4-1. 准备一个空字符串
let str = ''
// 4-2. 渲染一级的 a
res.forEach(item => {
str += `<a class="banner-nav-list-item">${ item.name }</a>`
})
// 4-3. 填充到 nav_top 里面的 ul 里面
$('.container2 ')
.html(str)
.on({
mouseenter: () => $('.nav_box').stop().slideDown(),
mouseleave: () => $('.nav_box').stop().slideUp()
})
.children('a') // 找到所有的一级菜单下的 a
.on('mouseover', function () {
// 5-1. 知道自己移入的时哪一个 a
const index = $(this).index()
// 5-2. 找到要渲染的数组
const list = res[index].list
// 5-3. 用我们找到的数组把 nav_box 位置渲染了就可以了
let str = ''
// 5-4. 进行组装
list.forEach(item => {
str += `
<li>
<div>
<img src="${ item.list_url }" alt="">
</div>
<p class="title">${ item.list_name }</p>
<p class="model">${item.list_model}</p>
<span class="price">¥${ item.list_price }</span>
</li>
`
})
// 5-5. 填充到页面里面
$('.nav_box > ul').html(str)
})
// 4-4. 给 nav_box 添加一个移入移出事件
$('.nav_box')
.on({
mouseover: function () { $(this).finish().show() },
mouseout: function () { $(this).finish().slideUp() }
})
}
})
}
分页渲染js
<script>
// 2-1. 准备一个变量
var flag = true
// 2-2. 准备一个变量接收数组
var list2 = []
// 1. 请求数据
getList2()
function getList2() {
$.ajax({
url: '../lib/list.json',
dataType: 'json',
success: function (res) {
// 2. 渲染分页器
$('.pagi').pagination({
pageCount: Math.ceil(res.length / 12), // 总页数
current: 1, // 当前页
jump: true,
coping: true,
homePage: '首页', // 首页按钮的文本
endPage: '末页', // 末页按钮的文本
prevContent: '上页',
nextContent: '下页',
callback: function (api) { // 当你切换页面的时候会触发
// api.getCurrent() 获取当前是第几页
// console.log(api.getCurrent())
let curr = api.getCurrent()
// console.log(curr)
// 根据是第几页, 从我的总数组里面筛选出一部分数据
// slice 方法包前不包后
var list = res.slice((curr - 1) * 12, curr * 12)
// console.log(list)
// slice 不改变原始数组, 只是从数组里面拿到一些内容
// splice 方法才是改变原始数组, 从原始数组里面删除
// 3-2. 每次使用分页器切换的时候渲染一次
bindHtml(list)
}
})
// 3. 先把第一页的数据渲染一次
bindHtml(res.slice(0, 12))
// 2-2. 给全局变量赋值
list2 = res
}
})
}
function bindHtml(list) {
// console.log(list)
// 根据 list 数组渲染页面就可以了
let str = ''
list.forEach(item => {
str += `
<li data-id="${ item.list_id }">
<img src="${item.list_url}">
<p>${ item.list_name }</p>
<p>${ item.list_price }</p>
</li>
`
})
$('.box > ul').html(str)
}
// 2. 排序
var btn = document.querySelector('.sort')
btn.onclick = function () {
// 让准备好的变量改变
flag = !flag
// 不管是什么都要把数组重组
list2.sort(function (a, b) {
if (flag === true) {
return a.list_id - b.list_id
} else {
return b.list_id - a.list_id
}
})
// console.log(list)
$('.pagi').pagination({
pageCount: Math.ceil(list2.length / 12), // 总页数
current: 1, // 当前页
jump: true,
coping: true,
homePage: '首页', // 首页按钮的文本
endPage: '末页', // 末页按钮的文本
prevContent: '上页',
nextContent: '下页',
callback: function (api) { // 当你切换页面的时候会触发
let curr = api.getCurrent()
// console.log(curr)
var list = list2.slice((curr - 1) * 12, curr * 12)
// 3-2. 每次使用分页器切换的时候渲染一次
bindHtml(list)
}
})
// 3. 先把第一页的数据渲染一次
bindHtml(list2.slice(0, 12))
}
// 3. 事件委托绑定一个事件
$('.box > ul').on('click', 'li', function () {
const id = $(this).data('id')
// console.log('我应该找到 list2 这个数组中 id 为 ' + id + ' 的那一条数据')
// 从总的数据里面找到 id 配套的哪一个数据
let data = {}
for (let i = 0; i < list2.length; i++) {
if (list2[i].id === id) {
data = list2[i]
break
}
}
// 4. 要把这一条数据拿到 detail.html 页面去渲染一下
// 跨页面通讯
// 在这个页面存储起来这个数据, 要在 detail.html 里面也能拿到
// cookie -> 存储起来的数据会在发送请求的时候自动携带
// localStorage -> 存储起来的数据不会自动携带
// 就把我找到的这个数据存储在 localStorage 里面
// 当你到达 detail 页面的时候, 在拿出来就可以了
localStorage.setItem('goods_info', JSON.stringify(data))
// 存储好了以后就跳转页面
window.location.href = './detail.html'
})
</script>
css
.pagi{
width: 1200px;
height: 100px;
margin: 0 auto;
border: 1px solid #333;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 1200px;
margin: 20px auto;
}
.box >ul{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box >ul >li{
width: 22%;
margin: 0 0 20px 20px;
border: 1px solid #333;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
flex-direction: column;
}
.box >ul>li >img{
width: 153px;
height: 206px;
display: block;
}
.box >ul>li >p{
font-size: 30px;
}
.sort{
width: 100px;
height: 40px;
font-size: 30px;
position: fixed;
top: 30px;
left: 30px;
}
模拟的json数据 list.json
[
{
"list_id": 1,
"list_name": "TL-WDR7660千兆版",
"list_model":"AC1900双频无线路由器",
"list_price": 199,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/815.png"
},
{
"list_id": 2,
"list_name": "TL-WDR5620",
"list_model":"AC1200双频无线路由器",
"list_price": 119,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/527.png"
},
{
"list_id": 3,
"list_name": "飞月•TL-WDR5670青瓷色",
"list_model":"AC1200双频无线路由器",
"list_price": 125,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/757.png"
},
{
"list_id": 4,
"list_name": "仲夏夜之梦•TL-WDR5660千兆版",
"list_model":"AC1200双频千兆无线路由器",
"list_price": 179,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/732.png"
},
{
"list_id": 5,
"list_name": "TL-WDR8630",
"list_model":"AC2600双频板阵天线千兆无线路由器",
"list_price": 529,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/606.png"
},
{
"list_id": 6,
"list_name": "TL-SG1210P",
"list_model":"8口全千兆以太网PoE交换机",
"list_price": 420,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/347.png"
},
{
"list_id": 7,
"list_name": "TL-ER3220G",
"list_model":"双核多WAN口千兆企业VPN路由器",
"list_price": 879,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/619.png"
},
{
"list_id": 8,
"list_name": "TL-R473GP-AC",
"list_model":"PoE•AC一体化千兆VPN路由器",
"list_price": 499,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/560.png"
},
{
"list_id": 9,
"list_name": "TL-HDAP1800C-PoE/DC",
"list_model":"AC1800四频高密度无线吸顶式AP",
"list_price": 799,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/742.png"
},
{
"list_id": 10,
"list_name": "TL-AP1202GI-PoE 薄款",
"list_model":"AC1200双频千兆无线面板式AP",
"list_price": 329,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/763.png"
},
{
"list_id": 11,
"list_name": "TL-WTR9500",
"list_model":"AC5400三频方阵千兆无线路由器",
"list_price": 2599,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/576.png"
},
{
"list_id": 12,
"list_name": "TL-WDR8630",
"list_model":"AC2600双频板阵千兆无线路由器",
"list_price": 529,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/606.png"
},
{
"list_id": 13,
"list_name": "绿野仙踪•TL-WDR8640",
"list_model":"AC2600双频板阵千兆无线路由器",
"list_price": 459,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/672.png"
},
{
"list_id": 14,
"list_name": "飞檐•TL-WDR5640",
"list_model":"AC1200双频方阵无线路由器",
"list_price": 129,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/655.png"
},
{
"list_id": 15,
"list_name": "X12套装",
"list_model":"全家通•智享路由",
"list_price": 349,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/712.png"
},
{
"list_id": 16,
"list_name": "TL-WVR2600L",
"list_model":"企业级AC2600双频无线VPN路由器",
"list_price": 1499,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/525.png"
},
{
"list_id": 17,
"list_name": "TL-WVR1300L",
"list_model":"企业级AC1300双频无线VPN路由器",
"list_price": 759,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/443.png"
},
{
"list_id": 18,
"list_name": "TL-WVR1200L",
"list_model":"企业级AC1200双频无线VPN路由器",
"list_price": 599,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/528.png"
},
{
"list_id": 19,
"list_name": "TL-WAR1208L",
"list_model":"企业级AC4300三频无线VPN路由器",
"list_price": 599,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/673.png"
},
{
"list_id": 20,
"list_name": "TL-WVR450G",
"list_model":"450M无线企业VPN路由器",
"list_price": 519,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/177.png"
},
{
"list_id": 21,
"list_name": "TL-IPC42A-4",
"list_model":"200万云台无线网络摄像机",
"list_price": 199,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/682.png"
},
{
"list_id": 22,
"list_name": "TL-IPC42C-4",
"list_model":"200万云台无线网络摄像机",
"list_price": 189,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/717.png"
},
{
"list_id": 23,
"list_name": "TL-IPC53A",
"list_model":"全景无线网络摄像机",
"list_price": 299,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/705.png"
},
{
"list_id": 24,
"list_name": "TL-IPC42C-4",
"list_model":"200万云台无线网络摄像机",
"list_price": 189,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/717.png"
},
{
"list_id": 25,
"list_name": "TL-IPC42C-4",
"list_model":"200万云台无线网络摄像机",
"list_price": 189,
"list_url": "http://www.tp-linkshop.com.cn/ProductImg200/717.png"
}
]