在我們移動端還有一個很常用的組件，那就是滑動加載更多組件。平常我們看到的很多插件實現相當復雜就覺得這個組件很難，其實不是的！！這個組件其實可以很簡單的就實現出來，而且體驗也能非常的棒(當然我們沒有實現下拉刷新功能)！！下面我們就一起來實現這個組件。

效果展示

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

DOM結構

頁面應該包含三個部分：1. 正文區域 2.加載小菊花以及記載文字 3.所有數據加載完成后的文字：

{{loadingText}}

{{complateText}}

css樣式

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

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

}

}

}

javascript

交互邏輯分析：頁面初始化的時候，獲取整個組件節點以及正文容器節點

對整個容器節點進行綁定scroll事件

容器進行滾動的過程中判斷是否距離頂部小于指定數值，如果小于則觸發自定義事件loadmore

業務代碼中監聽loadmore事件，如果觸發則加載數據

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

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)

}

}

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

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

export default {}

.r-loading-container{

display: inline-block;

vertical-align: middle;

img{

width: 20px;

height: 20px;

display: block;

}

}

寫在最后

最后這里附錄一個使用例子吧：

{{item}}

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

}

}

.item{

background-color: #f2f2f2;

border-bottom: 1px solid #fff;

height: 40px;

line-height: 40px;

text-align: center;

}

相關推薦：

總結

以上是生活随笔為你收集整理的滑动加载怎么做 php,vue之UI框架如何实现滑动加载数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。