确认订单-分页逻辑

js业务

业务1：收货地址业务 主要实现地址的新建、修改、确认

业务2：产品数据渲染业务 主要实现产品信息的渲染、计算数据

业务3：使用优惠卷业务 主要实现扫描二维码获取优惠卷、使用优惠卷码获取优惠卷

分页效果的原理

伪代码

先获取数据 

每一页显示3个数据 变量接收 pageCount= 3

let pageCount = 3
let pageNum = goodsList.length / pageCount // 结果 就是页数 renderGoods 控制渲染的个数

求共几页？产品数组的长度 / pageCount  假设长度 5 使用pageNum= 5/ 3 = 2

遍历pageNum 次每次添加一个option

function renderPageNum() {
    const objArrData = []
    for (let i = 0; i < pageNum; i++) {
      objArrData.push(`<option value="">第${i + 1}页</option>`)
    }
    // console.log(objArrData)
    // 数组的方法 join 把数组转换字符串
    pagaNumSelect.innerHTML = objArrData.map((prev, index) => prev).join('')
    document.querySelector('.order-pageNumAll').innerHTML = `共${objArrData.length}页`
  }
  renderPageNum()

 

第一页就渲染1-3个产品数据的信息 第二页4-6 ......第n页3n-2到3n个数据

打开页面默认渲染 1- 3个数据  renderGoods(1, 3)    

function renderGoods(startNum, endNum) {
    let goodsListNew = goodsList.slice(startNum - 1, endNum) // startNum 不包含自己
}

 orderGoodlist.innerHTML = goodsListNew

      .map(({ name, price, picture, location, num }, index) => {

        return ` <div class="order-item">

                            <div class="order-goodinfo">

                                <img src=${picture} alt="">

                                <span>${name}</span>

                            </div>

                            <div class="order-priceinfo">

                                <div class="order-price">${price}元 X ${num} </div>

                                <div class="order-total">${price * num}元</div>

                            </div>

                        </div>`

      })

      .join('')

给select添加change事件 每次切换 就获取对应的下标 比如第一页 selectedindex 就返回 0 第二页返回 1 通配符  把死数据换成活数据

 pagaNumSelect.addEventListener('change', function () {
    let n = pagaNumSelect.selectedIndex // 获取页数
    // console.log(n) n 从 0 开始计数 n=0就是第一页 前面讲了第一页显示 1-3 个数据信息
    renderGoods(3 * (n + 1) - 2, 3 * (n + 1)) // 渲染页数对应的数据 
  })