js实现列表向上无限滚动

本文实例为大家分享了js实现列表向上无限滚动的具体代码，供大家参考，具体内容如下：
在项目中有用到需要无限向上滚动，循环中奖手机号码，实现代码如下：

html：

<h5>恭喜以下中奖用户！</h5>
<div class="list_bg">
  <ul class="customer_list"></ul>
</div>

js:

//通过接口：获取中奖用户列表
function getLatestOrder() {
  apis.getPhoneList().done(function (data) {
    if (data.ERRORNO === "200") {
      /*  获奖用户列表 */
      var customerList = JSON.parse(data.DATA);
      var customerListHtml = "";
      if (customerList.length > 0) {
        customerList.forEach((ele, i) => {
          customerListHtml += `<li style="top:${i * 30}px">${ele}&nbsp;&nbsp;&nbsp;&nbsp;获得一次抽奖资格</li>`;
        });
        $(customerListHtml).appendTo($(".customer_list"));
      } else {
        $('.customer_list').html('<div style="margin-top:1rem;color:#fff;text-align:center;">敬请期待</div>');
      }
    }
  });
}

/* 手机号轮播 */
function showPhone() {
  setInterval(function () {
    $(".customer_list").children().each((index, ele) => {
      var top = parseInt(ele.style.top);
      top--;
      if (top < -30) {
        top = (100 - 1) * 30;
      }
      ele.style.top = top + "px";
    })
  }, 50)
}

css：

.customer_list {
  color: #fff;
  height: 2.4rem;
  font-size: .3rem;
  overflow: hidden;
  position: relative;
}

.customer_list li {
  width: 100%;
  height: .6rem;
  line-height: .6rem;
  position: absolute;
}

主要思路
1.先获取手机号列表；
2.将手机号拼接为 手机号+“获得一次抽奖资格” 的li标签，并设置每个li标签的top为top:${i * 30}px（将li向下排布好），最后添加到ul中；
3.注意事项为给ul设置overflow:hidden;
4.设置定时器，遍历所有的li，50ms将top值-1（向上移动即：减1），当li移出屏幕后，将该li的top值设置为最后一个li的位置；
5.最后的注意项就是避免重复调用showPhone()函数的问题，可以只在入口函数中调用showPhone()和getLatestOrder()，否则会出现列表重叠的情况。