美文网首页
JS - 单页面无限加载页面

JS - 单页面无限加载页面

作者: Iceesong | 来源:发表于2018-08-29 22:27 被阅读0次

    DEMO
    功能: 实现听过滚动无限刷新增添新元素

    监听 scroll 事件

    通过监听 scroll 事件,在页面滚动到距离底部不到 100px 时,开始增添元素

    image.png
    具体如下,计算出距离底部位置
        document.addEventListener('scroll', function(e) {
          if (document.documentElement.offsetHeight - pageYOffset - innerHeight < 100) {
             //此时操作 DOM 节点
             console.log('adding now....')
          }
        })
    

    创建 加入 dom 节点

    当滚动到 底部 100px 区域时,开始增添元素,为模拟真实页面获取时要请求网络带来的时间损耗,此处通过 setTimeout 模拟延时请求,

            //此时操作 DOM 节点
            setTimeout(() => {
              console.log('adding now....')
              new Array(10).fill(0).forEach(() => {
                var li = document.createElement('li')
                list.appendChild(li)
              })
            }, 1000)
    
    

    修复重复执行

    上面的代码有个问题,当滚动到底部100px时,在此滚动,同时会继续触发事件,一般我们不会有这样的需求

    image.png
    再次完善代码,设定状态 标签 loading ,以此来判断事件状态
        //初始化 loading
       var loading = false
        loadingText.style.display = 'none'
    
        document.addEventListener('scroll', function(e) {
          // 此处判断 loading 状态
          if (loading === false && ... < 100) {
            // 设定 loading 状态为 true
            loading = true
            loadingText.style.display = 'block'
    
            setTimeout(() => {
              // 操作 DOM
              // 添加完元素,初始化 loading 状态为 false
              loading = false
              loadingText.style.display = 'none'
            }, 1000)
          }
        })
    

    CSS修饰

    尽肯能随机化创建元素颜色,

    setTimeout(() => {
      //...
        new Array(10).fill(0).forEach(() => {
          var li = document.createElement('li')
          let c = list.childElementCount ** 2
          li.style.background = `rgba(${(c - 90) % 255},${c % 255},${(c + 110) % 255})`
          li.innerHTML = li.style.background
          list.appendChild(li)
        })
      //...
    }, 1000)
    
        li {
          margin: 5px;
          transition: .2s
        }
        li:hover{
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
    

    DEMO

    相关文章

      网友评论

          本文标题:JS - 单页面无限加载页面

          本文链接:https://www.haomeiwen.com/subject/jjzkwftx.html