mintui 上拉加载的时候不执行,然后整个页面卡死

发布于 2022-09-11 21:50:11 字数 3546 浏览 8 评论 0

1-tab页,么个页面都用到了上拉刷新下拉加载

2-下拉刷新可以实现,但是下拉加载就页面卡死不动,也没有执行下拉加载的函数

<template>
<div ref='PlayerWrap' :style="{ height: (tabPlayer.wrapperHeight-30) + 'px' }" class="member-box">

<mt-loadmore class="news_list" :top-method="loadTopPlayer" :bottom-method="loadBottomPlayer" ref="loadmorePlayer" :bottom-all-loaded="tabPlayer.allLoaded" :autoFill='tabPlayer.autoFill'>
  <div class="player-item disFlex flex-wrap" :style="{ height: (wrapperHeight-50) + 'px' }" ref='playerWrap'>
    <div class="item disFlex flexCenter flex-colum flex-pack-justify" v-for='(item,index) in playerList' :key='index'>
      <div class="item-in">
        <div class="top">
          <img :src="baseImgUrl +  item.avator" alt="" class="avator">
          <p class="num">{{ item.number }}</p>
          <div class="bond" v-if="item.is_admin =='4'"> <span>c</span> <img src="../assets/images/tournaments/limited_red.png" alt=""> </div>
          <div class="bond" v-if='item.is_admin=="2"'> <span>c</span><img src="../assets/images/tournaments/limited_green.png" alt=""></div>
        </div>
        <div class="bottom size-box">
          <p>{{item.name }}</p>
          <p>体育主管</p>
        </div>
      </div>
    </div>
    
    
data数据:
 tabPlayer: {
    allLoaded: false,
    autoFill: true,
    isPull: false,
    wrapperHeight: 0,
  },
  
  methods 方法:
     loadTopPlayer () {
  this.firstPlayerloader();
  this.$refs.loadmorePlayer.onTopLoaded();
},
loadBottomPlayer () {
  this.MorePlayerloader();
  this.$refs.loadmorePlayer.onBottomLoaded();
},
firstPlayerloader (id, page = 1, search = '') {
  var that = this;
  id = this.insId
  page = this.page
  search = this.playerSearch
  filter = this.filter
  this.$axios(
    this.httpInstitutionUrl + this.afterurl.institutionTeamMember, {
      id,
      page,
      search,
    },
    'get'
  ).then((res) => {
    if (res.data.code == 0) {
      this.playerList = res.data.data.member
      this.playerCount = res.data.data.count
      localStorage.setItem('playerId', this.playerCount)
      this.$nextTick(() => {
        if (res.data.data.member.length == 20) {
          that.tabPlayer.allLoaded = false;
        } else {
          that.tabPlayer.allLoaded = true;
        }
        // that.isPull = true;
        this.$refs.loadmorePlayer.onTopLoaded();
      });
    }
  }).catch((err) => {
    console.log(err);

  })
},
// 加载更多
MorePlayerloader (id, page = 1, search = '', filter) {
  console.log(111); //不执行
  var that = this;
  id = this.insId
  search = this.playerSearch
  page = this.page
  filter = this.filter
  this.$axios(
    this.httpInstitutionUrl + this.afterurl.institutionTeamMember, {
      id,
      page,
      search,
      filter,
    },
    'get'
  ).then((res) => {
    if (res.data.code == 0) {
      let data = this.playerList
      data.push(...res.data.data.member)
      this.playerList = data
      console.log('more', this.playerList);
      // 数据渲染成功后,隐藏下拉刷新的状态
      this.$nextTick(() => {
        if (res.data.data.member.length == 20) {
          that.tabPlayer.allLoaded = false;
          this.page = this.page + 1;
        } else {
          that.tabPlayer.allLoaded = true
          this.$refs.loadmorePlayer.onBottomLoaded();
        }
        that.isPull = false;
      });
    }
  }).catch((err) => {
    console.log(err);

  })

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文