vue モバイル UI フレームワークでスライドしてデータをロードする方法

この記事では主に Vue モバイル UI フレームワークのスライド読み込み方法を紹介しますので、参考にしてください。

前書き

モバイル端末には非常によく使用されるコンポーネントもあります。これは、スライドしてより多くのコンポーネントをロードします。通常、私たちは実装が非常に複雑なプラグインを多く目にし、このコンポーネントは難しいと考えていますが、実際はそうではありません。 ！このコンポーネントは実際には非常に簡単に実装でき、そのエクスペリエンスは非常に優れています (もちろん、プルダウンの更新機能は実装していません)。 ！このコンポーネントを一緒に実装しましょう。

効果の表示

まず、次のように、作成後の効果を示すために gif 写真を撮りましょう:

DOM 構造

このページには 3 つの部分が含まれている必要があります: 1テキスト領域 2 .小さな菊をロードし、テキストを記録します 3. すべてのデータがロードされた後のテキスト:

css スタイル

コンポーネント全体のコンテナーの r-scroll は固定幅である必要があります。 、余分な部分はスクロールできます。スクロール距離の下部にあるデフォルト値に達すると、メインテキストの領域の高さが自動的に増加します。すべてのデータがロードされた後に表示されます:

<p ref="scroll" class="r-scroll">
 <p class="r-scroll-wrap">
  <slot></slot>
 </p>
 <slot name="loading">
  <p v-show="isLoading" class="r-scroll-loading">
   <r-loading></r-loading>
   <span class="r-scroll-loading-text">{{loadingText}}</span>
  </p>
 </slot>
 <slot name="complate">
  <p v-show="isComplate" class="r-scroll-loading">{{complateText}}</p>
 </slot>
</p>

javascript

インタラクション論理分析:

ページが初期化されるとき、コンポーネントノード全体とテキストコンテナノードを取得します

1. Bindコンテナノード全体へのスクロールイベント

2. コンテナのスクロールプロセス中に、上部からの距離が指定された値より小さいかどうかを判断し、それより小さい場合、カスタムイベントloadmoreがトリガーされます

3. ビジネスコード内でloadmoreイベントを監視しており、トリガーされるとデータがロードされます

4. コードは複雑ではないため、詳細な分析は行いません。コードのコメントをご覧ください。不明な点がありましたらコメント欄にお願いします:

<style lang="scss">
@mixin one-screen {
 position: absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 overflow: hidden;
}
@mixin overflow-scroll {
 overflow: scroll;
 -webkit-overflow-scrolling: touch;
}

.r-scroll{
 @include one-screen;
 @include overflow-scroll;
 &-loading{
  text-align: center;
  padding-top: 3vw;
  padding-bottom: 3vw;
  font-size: 14px;
  color: #656565;
  line-height: 20px;
  &-text{
   display: inline-block;
   vertical-align: middle;
  }
 }
}
</style>

なお、このコンポーネントはロード小菊コンポーネントを参照しており、コードは簡単なので小菊コンポーネントのコードを追記しておきます。詳しくは分析しないでください:

菊はGIF画像を使用しています。お気に入りの菊GIFの写真を撮って、菊コンポーネントのパスの下に配置してください

<script>
import rLoading from &#39;../loading&#39;
export default{
 components: {rLoading},
 props: {
  // 距离底部数值，小于或等于该数值触发自定义事件loadmore
  bottomDistance: {
   type: [Number, String],
   default: 70
  },
  // 加载中的文字
  loadingText: {
   type: String,
   default: &#39;加载中...&#39;
  },
  // 数据加载完成的文字
  complateText: {
   type: String,
   default: &#39;-- 我是个有底线的列表 --&#39;
  }
 },
 data () {
  return {
   // 用来判定数据是否加载完成
   isComplate: false,
   // 用来判定是否正在加载数据
   isLoading: false,
   // 组件容器
   scroll: null,
   // 正文容器
   scrollWrap: null
  }
 },
 watch: {
  // 监听isLoading，如果isLoading的值为true则代表触发了loadmore事件
  isLoading (val) {
   if (val) {
    this.$emit(&#39;loadmore&#39;)
   }
  }
 },
 methods: {
  // 初始化组件，获取组件容器、正文容器节点，并给组件容器节点绑定滚动事件
  init () {
   this.scroll = this.$refs.scroll
   this.scrollWrap = this.scroll.childNodes[0]
   this.scroll.addEventListener(&#39;scroll&#39;, this.scrollEvent)
   this.$emit(&#39;init&#39;, this.scroll)
  },
  scrollEvent (e) {
   // 如果数据全部加载完成了，则再也不触发loadmore事件
   if (this.isComplate) return
   let scrollTop = this.scroll.scrollTop
   let scrollH = this.scroll.offsetHeight
   let scrollWrapH = this.scrollWrap.offsetHeight
   // 组件容器滚的距离 + 组件容器本身距离大于或者等于正文容器高度 - 指定数值 则触发loadmore事件
   if (scrollTop + scrollH >= scrollWrapH - this.bottomDistance) {
    this.isLoading = true
   }
  },
  // 当前数据加载完成后调用该函数
  loaded () {
   this.isLoading = false
  },
  // 所有数据加载完成后调用该函数
  compleate () {
   this.isLoading = false
   this.isComplate = true
   this.scroll.removeEventListener(&#39;scroll&#39;, this.scrollEvent)
  }
 },
 mounted () {
  this.$nextTick(this.init)
 }
}
</script>

最後に書いてください

最後に、使用例を付録に示します:

<template>
 <p class="r-loading-container">
  <img src="./loading.gif">
 </p>
</template>
<script>
export default {}
</script>
<style lang="scss">
.r-loading-container{
 display: inline-block;
 vertical-align: middle;
 img{
  width: 20px;
  height: 20px;
  display: block;
 }
}
</style>

上記は、すべての人のためにまとめたものです。将来、すべての人に役立つことを願っています。関連する記事：vue2ショッピングカートを実装し、選択機能に対処するためのVUE2の使用

以上がvue モバイル UI フレームワークでスライドしてデータをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。