长列表滚动加载demo

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>
    .list-container {
      max-height: 312px;
      overflow-y: auto;
    }
    #select-list {
      margin-top: 30px;
    }
    ul {
      padding: 0;
    }
    li {
      list-style: none;
    }

    .item {
      line-height: 28px;
      word-break: keep-all;
      white-space: nowrap;
      line-height: 28px;
      word-break: keep-all;
      white-space: nowrap;
      width: 100%;
      cursor: pointer;
      text-overflow: ellipsis;
      overflow-x: hidden;
      cursor: pointer;
    }

    .item:hover {
      color: red;
    }

    .select {
      width: 336px;
    }

    input {
      width: 100%;
      height: 32px;
    }

    .bigger {
      width: 400px;
      height: 400px;
      border: 1px solid red;
      overflow: auto;
    }

    .small {
      width: 400px;
      height: 32px;
      background-color: yellow;
      margin-bottom: 12px;
    }
  </style>
</head>
<body>
  <div class="select">
    <input type="text" id="input">
    <p id="total"></p>
    <div class="list-container">
      <ul id="select-list"></ul>
      <div class="bottom"></div>
    </div>
  </div>
  <script src="./index.js"></script>
</body>
</html>

js:

;(function (window, undefined) {
  const $list = document.getElementById('select-list')
  const $input = document.getElementById('input')
  const $container = document.querySelector('.list-container')
  const $total = document.getElementById('total')
  const pages = []
  let searchedPages = []
  const pageConfig = {
    total: 0,
    pageIndex: 0,
    pageSize: 10
  }
  const dist = []
  let pageLens = 0
  let searchkey = ''
  // 获取数据
  fetch('http://localhost:3000/').then(res => res.json()).then(res => {
    pageConfig.total = res.list.length
    $total.innerText = `一共查询到 ${pageConfig.total.toLocaleString()} 条数据`
    page(res.list)
  })
  // 分页
  function page (data) {
    pageLens = Math.ceil(data.length / pageConfig.pageSize)
    for (let i=0; i<pageLens; i = i+pageConfig.pageSize) {
      pages.push(data.slice(i, i+pageConfig.pageSize))
    }
    render()
  }
  // 设置dom
  function setList (data) {
    data.forEach(i => {
      let li = document.createElement('li')
      li.setAttribute('class', 'item')
      li.innerHTML = i
      $list.appendChild(li)
    })
  }
  // 点击
  $list.addEventListener('click', e => {
    if (e.target.className.includes('item')) {
      $input.value = e.target.innerText
    }
  })
  // 渲染
  let defPages
  function render () {
    defPages = searchkey ? searchedPages : pages
    if (searchkey && defPages.length === 0) {
      return
    }
    dist.push(...defPages[pageConfig.pageIndex])
    setList(dist)
  }
  // 监听页面滚动
  let maxHeight = $container.clientHeight
  $container.onscroll = e => {
    let target = e.currentTarget
    if (target.clientHeight + target.scrollTop + 10 >= target.scrollHeight) {
      if (pageConfig.pageIndex < defPages.length) {
        pageConfig.pageIndex++
        render()
        console.log(pageConfig.pageIndex)
      }
      console.log('已经是最后一页了')
    }
  } 
  // 查询
  $input.addEventListener('keyup', e => {
    searchkey = e.target.value
    if (!searchkey) return
    if (e.keyCode === 13) {
      searchedPages = []
      let total = 0
      pages.forEach(i => {
        let sub = []
        i.forEach(si => {
          if (si.includes(searchkey)) {
            total ++
            sub.push(si)
          }
        })
        sub.length !==0 && searchedPages.push(sub)
      })
      clearList()
      $total.innerText = `一共查询到 ${total.toLocaleString()} 条数据`
      render()
    }
  })
  // 清空list
  function clearList () {
    $list.innerHTML = ''
  }
})(window, undefined);

长列表滚动加载demo

一只鱼

引用和评论

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了