Comment le framework UI de vue implémente-t-il le chargement glissant des données ?

Il existe également un composant très couramment utilisé 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

D'abord une image gif pour montrer l'effet après l'avoir réalisé, 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

Le conteneur r-scroll de l'ensemble du composant doit être Largeur fixe, la partie excédentaire peut défiler ; la zone de texte doit automatiquement croître avec le contenu et la hauteur ; le chrysanthème de chargement sera affiché lorsque la valeur par défaut au bas de la distance de défilement est terminée, une fois le chargement des données terminé ; le texte sera affiché :

<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

Analyse de la logique d'interaction :

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

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

3. Déterminez si la distance est pendant le processus de défilement du conteneur Le haut est inférieur à la valeur spécifiée. Si elle est inférieure à l'événement personnalisé, chargezplus

4. , le code commercial. écoute l'événement loadmore. S'il est déclenché, les données sont chargées

car Le code n'est pas compliqué, donc je ne l'analyserai pas en détail. Veuillez lire les commentaires du code. Si vous avez des questions, merci de 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, il est cité dans ce composant En ce qui concerne le chargement du petit composant chrysanthème , l'annexe est un petit code de composant de chrysanthème. Parce que le code est simple, je ne l'analyserai pas en détail :

Chrysanthème utilise une image gif Veuillez prendre une photo de votre gif de chrysanthème préféré et mettez-la. dans le composant chrysanthème. Sous le chemin

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

est écrit à 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>

Recommandations associées :

js implémente le défilement de la souris pour charger les données

jquery dataTable Charger les données en arrière-plan et paginer

vue.js table pagination ajax charger les données de manière asynchrone

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!