vue2中mint-uiloadmore怎么实现下拉刷新,上拉更多功能

本文小编为大家详细介绍“vue2中mint-ui loadmore怎么实现下拉刷新,上拉更多功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue2中mint-ui loadmore怎么实现下拉刷新,上拉更多功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联专注于兴国网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供兴国营销型网站建设，兴国网站制作、兴国网页设计、兴国网站官网定制、成都小程序开发服务，打造兴国网络公司原创品牌,更为您提供兴国网站排名全网营销落地服务。

具体代码如下所示：

 export default {
  data() {
   return {
    list: [],
    allLoaded: false,
    bottomStatus: '',
    wrapperHeight: 0,
    topStatus: '',
    //wrapperHeight: 0,
    translate: 0,
    moveTranslate: 0
   };
  },
  methods: {
   handleBottomChange(status) {
    this.bottomStatus = status;
   },
   loadBottom() {
    setTimeout(() => {
     let lastValue = this.list[this.list.length - 1];
     if (lastValue < 40) {
      for (let i = 1; i <= 10; i++) {
       this.list.push(lastValue + i);
      }
     } else {
      this.allLoaded = true;
     }
     this.$refs.loadmore.onBottomLoaded();
    }, 1500);
   },
   handleTopChange(status) {
    this.moveTranslate = 1;
    this.topStatus = status;
   },
   translateChange(translate) {
    const translateNum = +translate;
    this.translate = translateNum.toFixed(2);
    this.moveTranslate = (1 + translateNum / 70).toFixed(2);
   },
   loadTop() {
    setTimeout(() => {
     let firstValue = this.list[0];
     for (let i = 1; i <= 10; i++) {
      this.list.unshift(firstValue - i);
     }
     this.$refs.loadmore.onTopLoaded();
    }, 1500);
   },
  },
  created() {
   for (let i = 1; i <= 20; i++) {
    this.list.push(i);
   }
  },
  mounted() {
   this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
  }
 };

读到这里，这篇“vue2中mint-ui loadmore怎么实现下拉刷新,上拉更多功能”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

标题名称：vue2中mint-uiloadmore怎么实现下拉刷新,上拉更多功能
网址分享：http://shouzuofang.com/article/iejpjj.html