欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue2 mint-ui loadmore实现下拉刷新,上拉更多功能

程序员文章站 2022-04-15 20:07:18
mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里主要给大家介绍vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,具体...

mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里主要给大家介绍vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,具体代码如下所示:

<template>
 <div class="page-loadmore">
  <h1 class="page-title">pull up</h1>
  <p class="page-loadmore-desc">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p>
  <p class="page-loadmore-desc">translate : {{ translate }}</p>
  <div class="loading-background" :style="{ transform: 'scale3d(' + movetranslate + ',' + movetranslate + ',1)' }">
   translatescale : {{ movetranslate }}
  </div>
  <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperheight + 'px' }">
   <mt-loadmore :top-method="loadtop" @translate-change="translatechange" @top-status-change="handletopchange"    :bottom-method="loadbottom" @bottom-status-change="handlebottomchange" :bottom-all-loaded="allloaded" ref="loadmore">
    <ul class="page-loadmore-list">
     <li v-for="item in list" class="page-loadmore-listitem">{{ item }}</li>
    </ul>
    <div slot="top" class="mint-loadmore-top">
     <span v-show="topstatus !== 'loading'" :class="{ 'is-rotate': topstatus === 'drop' }">↓</span>
     <span v-show="topstatus === 'loading'">
      <mt-spinner type="snake"></mt-spinner>
     </span>
    </div>
    <div slot="bottom" class="mint-loadmore-bottom">
     <span v-show="bottomstatus !== 'loading'" :class="{ 'is-rotate': bottomstatus === 'drop' }">↑</span>
     <span v-show="bottomstatus === 'loading'">
      <mt-spinner type="snake"></mt-spinner>
     </span>
    </div>
   </mt-loadmore>
  </div>
 </div>
</template>
<style>
 .loading-background, .mint-loadmore-top span {
  -webkit-transition: .2s linear;
  transition: .2s linear
 }
 .mint-loadmore-top span {
  display: inline-block;
  vertical-align: middle
 }
 .mint-loadmore-top span.is-rotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
 }
 .page-loadmore .mint-spinner {
  display: inline-block;
  vertical-align: middle
 }
 .page-loadmore-desc {
  text-align: center;
  color: #666;
  padding-bottom: 5px
 }
 .page-loadmore-desc:last-of-type,
 .page-loadmore-listitem {
  border-bottom: 1px solid #eee
 }
 .page-loadmore-listitem {
  height: 50px;
  line-height: 50px;
  text-align: center
 }
 .page-loadmore-listitem:first-child {
  border-top: 1px solid #eee
 }
 .page-loadmore-wrapper {
  overflow: scroll
 }
 .mint-loadmore-bottom span {
  display: inline-block;
  -webkit-transition: .2s linear;
  transition: .2s linear;
  vertical-align: middle
 }
 .mint-loadmore-bottom span.is-rotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
 }
</style>
<script type="text/babel">
 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;
  }
 };
</script>

总结

以上所述是小编给大家介绍的vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,希望对大家有所帮助