商城项目日结3

今天主要对首页的侧边导航栏进行的数据渲染，另外商品列表页通过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"
      }
     
  
  ]

张运成

发布了9 篇原创文章 · 获赞 0 · 访问量 101

私信关注

猜你喜欢