当前位置 : 主页 > 网络编程 > JavaScript >

列表无限滚动

来源:互联网 收集:自由互联 发布时间:2021-06-28
init-auto-scroll.js /** * 列表无限滚动 * @return {[type]} [description] */initAutoScroll() { let $listWrapper = this.$template.find('.list-wrapper'); let $list = $listWrapper.find('ul'); $list.clone().appendTo($listWrapper); this.scro
init-auto-scroll.js
/**
 * 列表无限滚动
 * @return {[type]} [description]
 */
initAutoScroll() {
  let $listWrapper = this.$template.find('.list-wrapper');
  let $list = $listWrapper.find('>ul');
  $list.clone().appendTo($listWrapper);
  this.scrollInterval = setInterval(() => {
    if($listWrapper.height() > $list.height()) {
      $list.next().remove();
      clearInterval(this.scrollInterval);
      return false;
    }
    let marginTop = Number.parseInt($list.css('marginTop'));
    if(Math.abs(marginTop) >= $list.height()) {
      marginTop = Number.parseInt($listWrapper.css('marginTop'));
    }
    $list.css({ marginTop: `${marginTop - 1}px` });
  }, 50);
}
网友评论