モバイル端末で更新するためのプルダウンと詳細を表示するためのプルアップを実装します。

今回はモバイルmint-uiのloadmoreで更新するプルダウンと詳細表示するプルアップを実装する方法と、モバイルmintで更新するプルダウンと詳細表示するプルアップを実装する方法をお届けします。 -uiloadmore 注意事項は何ですか? 以下は実際のケースです。見てみましょう。

mintui は、いくつかのモバイル機能の実装を容易にするために Ele.me チームによって開発されたモバイル コンポーネント ライブラリです。ここでは主に、より多くの機能のプルダウン リフレッシュとプルアップを実装する vue2 mint-ui loadmore を紹介します。具体的なコードは次のとおりです:

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSを使用してコンピュータ構成を検出する(コード付き)

vueのコード仕様を使用しない検出方法のまとめ

以上がモバイル端末で更新するためのプルダウンと詳細を表示するためのプルアップを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。