Vue 모바일 UI 프레임워크에서 슬라이딩하여 데이터를 로드하는 방법

이 글에서는 Vue 모바일 UI 프레임워크의 슬라이딩 로딩 방식을 주로 소개하고 참고용으로 올려드립니다.

머리말

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

효과 표시

먼저 다음과 같이 효과를 만든 후의 효과를 보여주기 위해 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

Interaction 논리적 분석:

1. 페이지가 초기화되면 전체 구성 요소 노드와 텍스트 컨테이너 노드를 얻습니다.

2. 바인딩 전체 컨테이너 노드에 대한 스크롤 이벤트

3. 컨테이너의 스크롤 프로세스 중에 상단으로부터의 거리가 지정된 값보다 작은지 확인하고, 그보다 작은 경우 사용자 정의 이벤트 loadmore가 트리거됩니다

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

위 내용은 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. Related Articles : vue2 vue2 쇼핑 카트 및 주소 선택 기능을 구현하려면 angular 개발 연습 서버 측 렌더링 vue 샘플 코드를 구현하기위한 샘플 코드는 모두 및 없음

입니다.

위 내용은 Vue 모바일 UI 프레임워크에서 슬라이딩하여 데이터를 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!