Comment charger des données en glissant dans le framework d'interface utilisateur mobile Vue

Cet article présente principalement la méthode de chargement coulissant du framework vue mobile UI. Maintenant, je le partage avec vous et le donne comme référence.

Avant-propos

Il existe également un composant très courant sur notre terminal mobile, qui glisse pour charger plus de composants. Habituellement, nous voyons de nombreux plug-ins assez compliqués à mettre en œuvre et pensons que ce composant est difficile, mais ce n'est pas le cas ! ! Ce composant peut en fait être implémenté très facilement, et l'expérience peut être très intéressante (bien sûr, nous n'avons pas implémenté la fonction d'actualisation déroulante) ! ! Implémentons ce composant ensemble.

Affichage de l'effet

Tout d'abord, une image GIF montre l'effet après l'avoir créé, comme suit :

Structure DOM

La page doit contenir trois parties : 1. Zone de texte 2. Charger le chrysanthème et enregistrer le texte 3. Tout charger data Texte complété :

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

style CSS

Conteneur r-scroll pour l'ensemble du composant Il doit s'agir d'une largeur fixe et la partie excédentaire peut défiler ; la zone de texte doit automatiquement croître en hauteur avec le contenu ; le petit chrysanthème sera affiché lors du chargement de la valeur par défaut en bas de la distance de défilement ; est chargé, le texte de fin de chargement des données s'affichera :

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

javascript

Interaction analyse logique :

1. Lorsque la page est initialisée, obtenez l'intégralité du nœud du composant et le nœud du conteneur de texte

2. Liez l'événement scroll à l'intégralité nœud de conteneur

3. Le conteneur défile Au cours du processus, il est jugé si la distance par rapport au sommet est inférieure à la valeur spécifiée. Si elle est inférieure à la valeur, l'événement personnalisé chargeplus<.>

4. est surveillé dans le code métier S'il est déclenché, les données sont chargées

Parce que le code n'est pas compliqué, je ne l'analyserai pas. en détail. Veuillez lire les commentaires du code. Si vous avez des questions, veuillez laisser un commentaire dans les commentaires :

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

De plus, le chargement. Le composant chrysanthème est référencé dans ce composant. Il y a un petit code du composant chrysanthème en annexe Parce que le code est simple, je ne l'analyserai pas en détail :

Le chrysanthème utilise une photo gif. du vôtre. Placez votre gif chrysanthème préféré sous le chemin du composant chrysanthème

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

et écrivez-le à la fin
Enfin, voici une annexe avec un exemple d'utilisation :

<template>
 <p class="index">
  <r-scroll ref="scroll" @loadmore="queryDate">
   <p class="item" v-for="(item, index) in list">{{item}}</p>
  </r-scroll>
 </p>
</template>

<script>
import rScroll from &#39;../../components/scroll&#39;
function timeout (ms) {
 return new Promise((resolve, reject) => {
  setTimeout(resolve, ms, &#39;done&#39;)
 })
}

export default{
 components: {rScroll},
 data () {
  return {
   i: 0,
   list: []
  }
 },
 methods: {
  async queryDate () {
   await timeout(1000)
   let i = this.i
   let data = []
   for (let j = 0; j < 40; j++) {
    data.push(i + j)
    this.i = this.i + 1
   }
   this.list = this.list.concat(data)
   // 调用组件中的loaded函数，如果数据加载完成后记得调用组件的compleate函数
   this.$refs.scroll.loaded()
  }
 },
 mounted () {
  this.queryDate()
 }
}
</script>

<style lang="scss">
.item{
 background-color: #f2f2f2;
 border-bottom: 1px solid #fff;
 height: 40px;
 line-height: 40px;
 text-align: center;
}
</style>

Ce qui précède est ce que j'ai compilé pour vous, j'espère. cela vous sera utile à l'avenir.

Articles connexes :

Utiliser vue2 pour implémenter les fonctions de panier d'achat et de sélection d'adresse

Rendu côté serveur de pratique de développement angulaire

Exemple de code Vue pour implémenter la sélection de tout et rien

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!