Implement pull-down refresh and pull-up display more on mobile mint-ui loadmore

This time I will bring you how to implement pull-down to refresh and pull-up to display more on the mobile side mint-ui loadmore, and how to implement pull-down to refresh and pull-up to display more on the mobile side mint-ui loadmore Notes Yes Which ones, the following are practical cases, let’s take a look.

mintui is a mobile component library developed by the Ele.me team for vue to facilitate the implementation of some mobile functions. Here we mainly introduce vue2 mint-ui loadmore to implement pull-down refresh and pull-up for more functions. The specific code As shown below:

<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: '',
    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>

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:

Use JS to detect computer configuration (with code)

Summary of detection methods without using vue code specification

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