這篇文章主要介紹了vue移動UI框架滑動加載的方法，現在分享給大家，也給大家做個參考。
前言
在我們行動端還有一個很常用的元件，就是滑動載入更多元件。平常我們看到的很多插件實作相當複雜就覺得這個元件很難，其實不是的！ ！這個元件其實可以很簡單的就實現出來，而且體驗也能非常的棒（當然我們沒有實現下拉刷新功能）！ ！下面我們就一起來實作這個元件。
效果展示
先上一個gif圖片展示我們做成後的效果，如下：
DOM結構
頁面應該包含三個部分：1.正文區域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-scroll應該是固定寬度，超出部分可以滾動的；正文區域應該是隨著內容，高度自動增長的；加載小菊花在滾動距離底部默認數值的時候顯示；所有數據加載完成後顯示數據加載完成文字：
<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
#互動邏輯分析：
- ##頁面初始化的時候，取得整個元件節點以及正文容器節點
- 對整個容器節點進行綁定scroll事件
- 容器進行捲動的過程中判斷是否距離頂部小於指定數值，如果小於則觸發自訂事件loadmore
- 業務程式碼中監聽loadmore事件，如果觸發則載入資料
因為程式碼不複雜，故不詳細解析，大家看下程式碼註釋，如有不清楚的請在評論中發表評論：
<script>
import rLoading from '../loading'
export default{
components: {rLoading},
props: {
// 距离底部数值，小于或等于该数值触发自定义事件loadmore
bottomDistance: {
type: [Number, String],
default: 70
},
// 加载中的文字
loadingText: {
type: String,
default: '加载中...'
},
// 数据加载完成的文字
complateText: {
type: String,
default: '-- 我是个有底线的列表 --'
}
},
data () {
return {
// 用来判定数据是否加载完成
isComplate: false,
// 用来判定是否正在加载数据
isLoading: false,
// 组件容器
scroll: null,
// 正文容器
scrollWrap: null
}
},
watch: {
// 监听isLoading，如果isLoading的值为true则代表触发了loadmore事件
isLoading (val) {
if (val) {
this.$emit('loadmore')
}
}
},
methods: {
// 初始化组件，获取组件容器、正文容器节点，并给组件容器节点绑定滚动事件
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) {
// 如果数据全部加载完成了，则再也不触发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('scroll', this.scrollEvent)
}
},
mounted () {
this.$nextTick(this.init)
}
}
</script>登入後複製
##另外該組件中引用到了loading小菊花組件，附錄一個小菊花組件代碼，因代碼簡單故不詳細解析：
菊花使用的是一張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 '../../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)
// 调用组件中的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>登入後複製
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
使用vue2實作購物車與位址選配功能
Angular開發實務服務端渲染
vue 實作全選全不選的範例程式碼
以上是vue移動UI框架滑動載入資料的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
