집 >웹 프론트엔드 >JS 튜토리얼 >vue의 UI 프레임워크는 데이터의 슬라이딩 로딩을 어떻게 구현합니까?

vue의 UI 프레임워크는 데이터의 슬라이딩 로딩을 어떻게 구현합니까?

小云云원래의: 2018-03-13 09:31:131755검색

우리 모바일 단말기에도 아주 흔히 사용되는 컴포넌트가 있는데, 더 많은 컴포넌트를 로드하기 위해 슬라이딩하는 것입니다. 일반적으로 우리는 구현하기가 매우 복잡한 플러그인을 많이 보고 이 구성 요소가 어렵다고 생각하지만 그렇지 않습니다! ! 이 구성 요소는 실제로 매우 쉽게 구현할 수 있으며 경험도 매우 훌륭할 수 있습니다(물론 풀다운 새로 고침 기능을 구현하지 않았습니다)! ! 이 구성요소를 함께 구현해 보겠습니다.

효과 표시

먼저 다음과 같이 효과를 만든 후의 효과를 보여주기 위해 gif 사진을 찍어 보겠습니다.

DOM 구조

페이지에는 세 부분이 포함되어야 합니다. . 텍스트 영역 2. 작은 국화를 로드하고 텍스트를 기록합니다. 3. 모든 데이터가 로드된 후의 텍스트:

<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 스타일

전체 구성 요소의 컨테이너 r-스크롤은 고정된 너비를 가져야 합니다. 초과된 부분은 스크롤될 수 있습니다. 스크롤 거리 하단의 기본값이 로드되면 텍스트 영역이 자동으로 증가해야 합니다. 로드됨:

<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

대화형 논리 분석:

페이지가 초기화되면 전체 구성 요소 노드와 텍스트 컨테이너 노드를 가져옵니다.
스크롤 이벤트를 전체 컨테이너에 바인딩합니다. node
컨테이너의 스크롤 과정에서 상단으로부터의 거리가 지정된 값보다 작은지 확인합니다. 1보다 작은 경우 사용자 정의 이벤트 loadmore가 트리거됩니다
loadmore 이벤트는 다음과 같습니다. 트리거되면 데이터가 로드됩니다

코드가 복잡하지 않기 때문에 자세히 분석되지는 않습니다. 댓글에 댓글 달아주세요:

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

또한 본 컴포넌트에서는 로딩하는 작은 국화 컴포넌트를 참조하고, 코드가 간단하기 때문에 자세히 분석하지는 않겠습니다. :

국화는 gif 이미지를 사용하고 있으니 사진을 찍어주세요 국화 구성품 경로 아래에 마음에 드는 국화 gif를 올려주세요

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

마지막에 적어주세요

마지막으로 부록이 있습니다 사용 예:

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

vue의 UI 프레임워크는 데이터의 슬라이딩 로딩을 어떻게 구현합니까?

관련 기사