快捷導(dǎo)航

vue移動UI框架滑動加載數(shù)據(jù)的方法

更新時間：2018年03月12日 09:36:45 作者：cyq

這篇文章主要介紹了vue移動UI框架滑動加載的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

在我們移動端還有一個很常用的組件，那就是滑動加載更多組件。平常我們看到的很多插件實現(xiàn)相當(dāng)復(fù)雜就覺得這個組件很難，其實不是的?。∵@個組件其實可以很簡單的就實現(xiàn)出來，而且體驗也能非常的棒（當(dāng)然我們沒有實現(xiàn)下拉刷新功能）?。∠旅嫖覀兙鸵黄饋韺崿F(xiàn)這個組件。

效果展示

先上一個gif圖片展示我們做成后的效果，如下：

DOM結(jié)構(gòu)

頁面應(yīng)該包含三個部分：1. 正文區(qū)域 2.加載小菊花以及記載文字 3.所有數(shù)據(jù)加載完成后的文字：

<div ref="scroll" class="r-scroll">
 <div class="r-scroll-wrap">
  <slot></slot>
 </div>
 <slot name="loading">
  <div v-show="isLoading" class="r-scroll-loading">
   <r-loading></r-loading>
   <span class="r-scroll-loading-text">{{loadingText}}</span>
  </div>
 </slot>
 <slot name="complate">
  <div v-show="isComplate" class="r-scroll-loading">{{complateText}}</div>
 </slot>
</div>

css樣式

整個組件的容器r-scroll應(yīng)該是固定寬度，超出部分可以滾動的；正文區(qū)域應(yīng)該是隨著內(nèi)容，高度自動增長的；加載小菊花在滾動距離底部默認(rèn)數(shù)值的時候顯示；所有數(shù)據(jù)加載完成后顯示數(shù)據(jù)加載完成文字：

<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

交互邏輯分析：

頁面初始化的時候，獲取整個組件節(jié)點以及正文容器節(jié)點
對整個容器節(jié)點進(jìn)行綁定scroll事件
容器進(jìn)行滾動的過程中判斷是否距離頂部小于指定數(shù)值，如果小于則觸發(fā)自定義事件loadmore
業(yè)務(wù)代碼中監(jiān)聽loadmore事件，如果觸發(fā)則加載數(shù)據(jù)

因為代碼不復(fù)雜，故不詳細(xì)解析，大家看下代碼注釋，如有不清楚的請在評論中發(fā)表評論：

<script>
import rLoading from '../loading'
export default{
 components: {rLoading},
 props: {
  // 距離底部數(shù)值，小于或等于該數(shù)值觸發(fā)自定義事件loadmore
  bottomDistance: {
   type: [Number, String],
   default: 70
  },
  // 加載中的文字
  loadingText: {
   type: String,
   default: '加載中...'
  },
  // 數(shù)據(jù)加載完成的文字
  complateText: {
   type: String,
   default: '-- 我是個有底線的列表 --'
  }
 },
 data () {
  return {
   // 用來判定數(shù)據(jù)是否加載完成
   isComplate: false,
   // 用來判定是否正在加載數(shù)據(jù)
   isLoading: false,
   // 組件容器
   scroll: null,
   // 正文容器
   scrollWrap: null
  }
 },
 watch: {
  // 監(jiān)聽isLoading，如果isLoading的值為true則代表觸發(fā)了loadmore事件
  isLoading (val) {
   if (val) {
    this.$emit('loadmore')
   }
  }
 },
 methods: {
  // 初始化組件，獲取組件容器、正文容器節(jié)點，并給組件容器節(jié)點綁定滾動事件
  init () {
   this.scroll = this.$refs.scroll
   this.scrollWrap = this.scroll.childNodes[0]
   this.scroll.addEventListener('scroll', this.scrollEvent)
   this.$emit('init', this.scroll)
  },
  scrollEvent (e) {
   // 如果數(shù)據(jù)全部加載完成了，則再也不觸發(fā)loadmore事件
   if (this.isComplate) return
   let scrollTop = this.scroll.scrollTop
   let scrollH = this.scroll.offsetHeight
   let scrollWrapH = this.scrollWrap.offsetHeight
   // 組件容器滾的距離 + 組件容器本身距離大于或者等于正文容器高度 - 指定數(shù)值 則觸發(fā)loadmore事件
   if (scrollTop + scrollH >= scrollWrapH - this.bottomDistance) {
    this.isLoading = true
   }
  },
  // 當(dāng)前數(shù)據(jù)加載完成后調(diào)用該函數(shù)
  loaded () {
   this.isLoading = false
  },
  // 所有數(shù)據(jù)加載完成后調(diào)用該函數(shù)
  compleate () {
   this.isLoading = false
   this.isComplate = true
   this.scroll.removeEventListener('scroll', this.scrollEvent)
  }
 },
 mounted () {
  this.$nextTick(this.init)
 }
}
</script>

另外該組件中引用到了loading小菊花組件，附錄一個小菊花組件代碼，因代碼簡單故不詳細(xì)解析：

菊花使用的是一張gif圖片，請照一張你喜歡的菊花gif放在該菊花組件的路徑下

<template>
 <div class="r-loading-container">
  <img src="./loading.gif">
 </div>
</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>
 <div class="index">
  <r-scroll ref="scroll" @loadmore="queryDate">
   <div class="item" v-for="(item, index) in list">{{item}}</div>
  </r-scroll>
 </div>
</template>

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

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)
   // 調(diào)用組件中的loaded函數(shù)，如果數(shù)據(jù)加載完成后記得調(diào)用組件的compleate函數(shù)
   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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: