mintui无限滚动指令 设置 切换导航 之后 滚动条自动滚到顶部 滚动条bug

Infinite Scroll 无限滚动指令

<div v-infinite-scroll="loadMore"	触底后执行的函数的函数名
infinite-scroll-distance="50"	触发触底事件的距离阈值
>
....
....巨长....
</div>
<script>
....
methods: {
loadMore(){
// let url = `/articles?cid=${cid}&page=${page}`;
      // this.axios.get(url).then((res) => {
      //   console.log(`加载${cid}类别的第${page}页`, res);
      //   this.articles.push(...res.data.results);
      //   this.isLoading = false; //修改为false  加载完毕
      // });}
}
************************************************
 // 加载下一页
    loadMore() {
      if (this.isLoading) return;
      this.isLoading = true; //修改为true 数据加载中
      let cid = this.active; //当前类别ID
      let page = ++this.page;
      this.loadArticles(cid, page, (articlelist) => {
        this.articles.push(...articlelist);
        this.isLoading = false;
      });
 

 <mt-tab-container
    
      v-infinite-scroll="loadMore"
      infinite-scroll-distance="30"
      :infinite-scroll-immediate-check="true">

 页面保活 鼠标无限滚动跳转到其他页面 出现bug  滚动就加载数据  在 保活俩个周期里添加

activated() {
    console.log("/home/index activated..");
    // this.isLoading = false; //启用曲线滚动
  },
  deactivated() {
    console.log("/home/indexdeactivated......");
    // this.isLoading = true; //禁用无限滚动
  },

export default {
  data() {
    return {
      active: "1",
      cats: [], //保存类别列表
      articles: [], //保存当前页面显示的文章列表
      page: 1, //描述当前页码
      isLoading: false, //表示当前列表是否正在加载中
    };
  },
  methods: {
    /**  封装函数 用来加载某一页文章列表
     cid：类别ID
     page：页码
     callback：成功后将会调用的回调方法，回传，文章数组
     */
    loadArticles(cid, page, callback) {
      // 弹出等待框
      this.$indicator.open({
        text: "加载中，请稍后...",
        spinnerType: "triple-bounce",
      });
      let url = `/articles?cid=${cid}&page=${page}`;
      this.axios.get(url).then((res) => {
        // 将得到的文章列表通过callback回传给调用者
        callback(res.data.results);
        //结束弹出框
        this.$indicator.close();
      });
    },

    // 加载下一页
    loadMore() {
      if (this.isLoading) return;
      this.isLoading = true;

      const cid = this.active; //当前类别ID
      const page = ++this.page; //描述即将访问的页码
      this.loadArticles(cid, page, (articleList) => {
        console.log(`加载${cid}类别的第${page}页`, articleList);
        // 将结果追加到当前列表的末尾
        // ... 去掉外面的{}
        this.articles.push(...articleList);
        this.isLoading = false; //修改false 加载完毕
      });
    },
  },
  activated() {
    console.log("/home/index activated..");
    // this.isLoading = false; //启用曲线滚动
  },
  deactivated() {
    console.log("/home/indexdeactivated......");
    // this.isLoading = true; //禁用无限滚动
  },
  mounted() {
    // 加载类别列表
    this.axios.get("/category").then((res) => {
      console.log("加载类别列表", res);
      this.cats = res.data.results;
    });

    // 加载UI类别下的首页文章列表

    /*****原始写法 ********/
    // this.axios.get("/articles?cid=1&page=1").then((res) => {
    //   console.log("加载首页UI文章列表", res);
    //   this.articles = res.data.results;
    // });

    /*使用封装函数*/
    this.loadArticles(1, 1, (articleList) => {
      console.log("加载首页UI文章列表", articleList);
      this.articles = articleList; //存入data
    });
  },

  watch: {
    // 监听顶部导航更新
    active(newValue, oldValue) {
      // 设置 切换导航 之后 滚动条自动滚到顶部
      window.scrollTo(0, 0);
      // 切换导航之后 将this.page重置为1
      this.page = 1;

      console.log(newValue);

      this.loadArticles(newValue, 1, (articleList) => {
        console.log("切换导航选中项", articleList);
        this.articles = articleList;
      });
    },
  },
};