Heim > Web-Frontend > js-Tutorial > Hauptteil

vue2 mint-ui Loadmore implementiert Pulldown-Aktualisierung und Pullup für weitere Funktionen

亚连
Freigeben: 2018-05-26 17:41:44
Original
1464 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich vue2 mint-ui Loadmore vorgestellt, um Pulldown-Aktualisierung und Pullup für weitere Funktionen zu implementieren.

Mintui ist eine von Ele entwickelte mobile Komponentenbibliothek .me-Team für vue, um die Implementierung einiger Funktionen auf dem mobilen Endgerät zu erleichtern. Hier stellen wir Ihnen hauptsächlich vue2 mint-ui Loadmore vor, um Pull-Down-Aktualisierung und Pull-Up für weitere Funktionen zu implementieren :

<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>
Nach dem Login kopieren

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

5 Ajax-Interaktionsmethoden zwischen Spring MVC Front-End und Back-End

ajax+springmvc implementiert die C- und Datenaustauschmethode zwischen Ansichten

Die Ajax-Post-Methode gibt direkt eine Zahl zurück, die mit 0 beginnt, und eine Fehleranalyse

Das obige ist der detaillierte Inhalt vonvue2 mint-ui Loadmore implementiert Pulldown-Aktualisierung und Pullup für weitere Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage