首页 > 其他分享> 文章详细

确认订单

2022-08-11 01:30:22 阅读：166 来源： 互联网

标签：pageNum 渲染 pageCount 确认 renderGoods 订单 let objArrData

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)) // 渲染页数对应的数据 
  })

标签：pageNum,渲染,pageCount,确认,renderGoods,订单,let,objArrData
来源： https://www.cnblogs.com/zhulongxu/p/16574260.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9