mintui loadmore 初次加载时，整体向上移动一段距离

Question

头部固定，使用mintUI loadmore ，在页面第一次加载进来时，会自动向上移动一段距离
正常应该是这样子

经过查看mintui源码，发现应该是设置了auto-fill="true"（我这里每次只返回两三个数据，会多次加载），最后一次加载数据，this.$refs.loadmore.onBottomLoaded()方法导致loadmore组件整体上移了50px，onBottomLoaded对应源码如下：

onBottomLoaded() {
        this.bottomStatus = 'pull';
        this.bottomDropped = false;
        this.$nextTick(() => {
          if (this.scrollEventTarget === window) {
            document.body.scrollTop += 50;
          } else {
            this.scrollEventTarget.scrollTop += 50;
          }
          this.translate = 0;
        });
        if (!this.bottomAllLoaded && !this.containerFilled) {
          this.fillContainer();
        }
      },

请大佬帮忙看一下，谢谢！

我的代码如下（只保留主要部分）

<template>
  <div class="notice view">
    <TopHead title="公告" class="header"></TopHead>
    <div class="main">
      <Loadmore
        ref="loadmore"
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :auto-fill="true"
      >
        <ul class="noticeList">
          <li v-for="item in noticeList" :key="item.id" class="noticeItem">
          .....
          </li>
        </ul>
      </Loadmore>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 页面实现header固定，main单独实现滑动
.view {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  .header {
    flex-shrink: 0;
  }
  .main {
    overflow: scroll;
    height: 100%;
  }
}

......
</style>

<script>
import '../assets/font/iconfont.css'
import TopHead from '../components/TopHead'
import service from '../service'
import { Loadmore } from 'mint-ui'
import { mapState } from 'vuex'
import { mapMutations } from 'vuex'
export default {
  name: 'Notice',
  components: {
    TopHead,
    Loadmore
  },
  data() {
    return {
      allLoaded: false, //数据全部加载完，设置为true，不会再加载数据
      earlistDate: null,
      latestDate: null
    }
  },
  computed: {
    ...mapState({
      noticeList: 'noticeList'
    })
  },
  mounted() {
    service.getNotice(new Date(), 15, true).then(res => {
     ....
    })
  },
  methods: {
    ...mapMutations(['noticeListPush', 'noticeListUnshift']),
    loadTop() {
      service.getNotice(this.latestDate, 15, false).then(res => {
      ...
        // 加载数据后需要对组件进行一些重新定位的操作。
        this.$refs.loadmore.onTopLoaded()
      })
    },
    loadBottom() {
      service.getNotice(this.earlistDate, 15, true).then(
        ...
        // 加载数据后需要对组件进行一些重新定位的操作。
        // ???????这句代码导致了第一次进入时，loadmore组件会整体向上移动一段距离bug,未能解决。
        this.$refs.loadmore.onBottomLoaded()
      })
    }
  }
}
</script>

Answer 1

首次获取列表不能调用loadmore.onBottomLoaded()，触发加载更多之后才能调用这个方法。可以加个变量区分首次加载和加载更多