How does the UI framework of vue implement sliding loading of data?

There is also a very commonly used component on our mobile terminal, which is sliding to load more components. Usually we see many plug-ins that are quite complicated to implement and think that this component is difficult, but it is not! ! This component can actually be implemented very easily, and the experience can be very great (of course we did not implement the pull-down refresh function)! ! Let's implement this component together.

Effect display

First, a gif picture shows the effect after we make it, as follows:

DOM structure

The page should contain three parts: 1. Text area 2. Load the chrysanthemum and record text 3. Load all data Completed text:

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

css style

The container r-scroll of the entire component should be of fixed width, The excess part can be scrolled; the text area should automatically grow in height along with the content; the loading chrysanthemum will be displayed when the scroll distance reaches the default value at the bottom; after all data is loaded, the data loading completion text will be displayed:

<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

Interactive logic analysis:

1. When the page is initialized, get the entire component node And the text container node

2. Bind the scroll event to the entire container node

3. During the scrolling process of the container, determine whether the distance from the top is less than the specified value , if it is less than, trigger the custom event loadmore

4. Listen to the loadmore event in the business code, and if triggered, load the data

Because the code is not complicated, Therefore, I will not analyze it in detail. Please take a look at the code comments. If you are unclear, please leave a comment in the comments:

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

In addition, the loading chrysanthemum component is referenced in this component. Appendix is ​​a small chrysanthemum component code. Because the code is simple, I will not analyze it in detail:

Chrysanthemum uses a gif image. Please take a gif of your favorite chrysanthemum and place it under the path of the chrysanthemum component

<template>
 <p class="r-loading-container">
  <img  src="/static/imghwm/default1.png"  data-src="./loading.gif"  class="lazy"   alt="How does the UI framework of vue implement sliding loading of data?" >
 </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>

Write it at the end

Finally, here is an appendix of a usage example:

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

Related recommendations:

js implements scrolling mouse to load data

jquery dataTable background loading data and paging

vue.js table pagination ajax asynchronous loading of data

The above is the detailed content of How does the UI framework of vue implement sliding loading of data?. For more information, please follow other related articles on the PHP Chinese website!