前端疯狂的轮子之移动端上拉加载更多

最近在用museui，列表操作的时候碰到了很多问题，下拉刷新还要，上拉加载更多始终无法触发，一顿谷百后在GitHub别人提的issue中找到了解决方案。然而解决方案与项目本身冲突，要解决冲突看上去很麻烦的样子，就自己造个轮子吧。

先说一下museui中的list上拉加载更多的问题。照着官网的demo怼了一个一毛一样的list，却怎么也触发不了load方法，最后在github的issue上发现这个load方法要依赖list的样式。也就是说样式必须严格按照官网demo给的，并且你项目里的overflow不能是hidden。

官网demo的css样式

<style lang="less">
.demo-loadmore-wrap {
  width: 100%;
  max-width: 360px;
  height: 420px;
  display: flex;
  flex-direction: column;
  .mu-appbar {
    width: 100%;
  }
}
.demo-loadmore-content {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
</style>

 如果照着这个样式怼上去与项目有冲突，那就写一个上拉加载吧，下面开始造轮子。

1.触发条件

上拉加载更多的触发条件是监听页面滚动，滚动到最底部时触发加载动作。

在vue的mounted方法里用原生js实现

window.addEventListener("scroll", () => {
      var scrollY = window.scrollY; // 当前滚动位置
      var innerHeight = window.innerHeight; // 窗口的高度
      var scrollHeight = document.body.scrollHeight; // 页面滚动总高度
      if (scrollY + innerHeight == scrollHeight) { // 滚动位置+窗口高度=页面滚动总高度
        this.loadMore(); // 加载更多方法
      }
    });

2.加载更多过程中的loading图标和文字处理

在加载更多方法执行时显示loading，加载完毕后隐藏loading即可。

 

至此小滑轮就造完了。。。