Implémentez un menu déroulant pour actualiser et un pull-up pour en afficher davantage sur le terminal mobile mint-ui loadmore

Cette fois, je vais vous expliquer comment implémenter le menu déroulant pour actualiser et tirer-up pour en afficher davantage sur le côté mobile mint-ui loadmore, et implémenter le menu déroulant pour actualiser et tirer-up pour afficher davantage sur le mobile. side mint-ui loadmore NotesOui Lesquels, les suivants sont des cas pratiques, jetons un coup d'œil.

mintui est une bibliothèque de composants mobiles développée par l'équipe Ele.me pour vue afin de faciliter la mise en œuvre de certaines fonctions mobiles. Ici, nous présentons principalement vue2 mint-ui loadmore pour implémenter l'actualisation déroulante et le pull-up pour. plus de fonctions.Le code spécifique Comme indiqué ci-dessous :

<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php chinois. site web!

Lecture recommandée :

Utiliser JS pour détecter la configuration de l'ordinateur (avec code)

Résumé des méthodes de détection sans utiliser vue spécifications du code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!