mint-ui implements pull-down refresh and pull-up loading on the mobile phone

This time I will bring you mint-ui to make pull-down refresh and pull-up loading on the mobile phone. What are the precautions for mint-ui to make pull-down refresh and pull-up loading on the mobile phone. The following is a practical case, one Get up and take a look.

<template>
 <p class="page-loadmore">
  <h1 class="page-title">Pull up</h1>
  <p class="page-loadmore-desc">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p>
  <p class="page-loadmore-desc">translate : {{ translate }}</p>
  <p class="loading-background" :style="{ transform: &#39;scale3d(&#39; + moveTranslate + &#39;,&#39; + moveTranslate + &#39;,1)&#39; }">
   translateScale : {{ moveTranslate }}
  </p>
  <p class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + &#39;px&#39; }">
   <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>
    <p slot="top" class="mint-loadmore-top">
     <span v-show="topStatus !== &#39;loading&#39;" :class="{ &#39;is-rotate&#39;: topStatus === &#39;drop&#39; }">↓</span>
     <span v-show="topStatus === &#39;loading&#39;">
      <mt-spinner type="snake"></mt-spinner>
     </span>
    </p>
    <p slot="bottom" class="mint-loadmore-bottom">
     <span v-show="bottomStatus !== &#39;loading&#39;" :class="{ &#39;is-rotate&#39;: bottomStatus === &#39;drop&#39; }">↑</span>
     <span v-show="bottomStatus === &#39;loading&#39;">
      <mt-spinner type="snake"></mt-spinner>
     </span>
    </p>
   </mt-loadmore>
  </p>
 </p>
</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: &#39;&#39;,
    wrapperHeight: 0,
    topStatus: &#39;&#39;,
    //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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Using iview’s ui framework to customize the player

How to operate JS to traverse multi-dimensional arrays

The above is the detailed content of mint-ui implements pull-down refresh and pull-up loading on the mobile phone. For more information, please follow other related articles on the PHP Chinese website!