ホームページ >ウェブフロントエンド >jsチュートリアル >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
インタラクション論理分析:
ビジネスコード内でloadmoreイベントを監視しており、トリガーされるとデータがロードされます
<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 '../loading' export default{ components: {rLoading}, props: { // 距离底部数值,小于或等于该数值触发自定义事件loadmore bottomDistance: { type: [Number, String], default: 70 }, // 加载中的文字 loadingText: { type: String, default: '加载中...' }, // 数据加载完成的文字 complateText: { type: String, default: '-- 我是个有底线的列表 --' } }, data () { return { // 用来判定数据是否加载完成 isComplate: false, // 用来判定是否正在加载数据 isLoading: false, // 组件容器 scroll: null, // 正文容器 scrollWrap: null } }, watch: { // 监听isLoading,如果isLoading的值为true则代表触发了loadmore事件 isLoading (val) { if (val) { this.$emit('loadmore') } } }, methods: { // 初始化组件,获取组件容器、正文容器节点,并给组件容器节点绑定滚动事件 init () { this.scroll = this.$refs.scroll this.scrollWrap = this.scroll.childNodes[0] this.scroll.addEventListener('scroll', this.scrollEvent) this.$emit('init', 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('scroll', 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 サイトの他の関連記事を参照してください。