溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
建議先看vue瀑布流組件上拉加載更多再來食用本文，如果直接想看源碼文末就是~
文末新增組件優化，之所以沒有刪優化前的代碼是想讓以后自己還能看到走過的路。
上一篇講到在項目中使用上拉加載更多組件，但是由于實際項目開發中由于需求變更或者說在webview中上拉加載有些機型在上拉時候會把webview也一起上拉導致上拉加載不靈敏等問題，我們有時候也會換成滑動到底部自動加載的功能。
既然都是加載更多，很多代碼思想勢必相似，主要區別在于上拉和滑動到底部這個操作上，所以，我們需要注意：
1、上拉加載是point指針touch觸摸事件，現在因為是滑動加載，需要添加scroll事件去監聽然后執行相應回調
2、上拉加載主要計算觸摸滾動距離，滑動加載主要計算container底部和視窗上邊緣的距離
事件綁定改成：
mounted() {
···
this.dom.addEventListener('scroll', this.scroll, false)
···
},
beforeDestroy() {
···
this.dom.removeEventListener('scroll', this.scroll, false)
···
},
事件回調改為：
/**
* 滾動鉤子
*/
scroll() {
const viewHeight = global.innerHeight
let parentNode
if (this.container !== global) {
parentNode = this.$el
} else {
parentNode = this.$el.parentNode
}
if (parentNode) {
// 獲取Vue實例使用的根 DOM 元素相對于視口的位置
const rect = parentNode.getBoundingClientRect()
// this.distance 離底部多少距離開始加載
// 如果此元素底邊距離視口頂部的距離小于視口高度加上distance之和，就加載下一頁
if ((rect.bottom <= viewHeight + this.distance) && this.loadable && !this.loading) {
this.load()
}
}
},
源碼如下：
<template>
<div class="loadmore" ref="loadmore">
<div class="loadmore__body">
<slot></slot>
</div>
<div class="loadmore__footer">
<span v-if="loading">
<i class="tc-loading"></i>
<span>正在加載</span>
</span>
<span v-else-if="loadable">加載更多</span>
<span v-else>沒有更多了</span>
</div>
</div>
</template>
<script type="text/babel">
import axios from 'axios'
const CancelToken = axios.CancelToken
export default {
data() {
return {
/**
* 總頁數（由服務端返回）
* @type {number}
*/
count: 0,
/**
* 是否正在拖拽中
* @type {boolean}
*/
dragging: false,
/**
* 已加載次數
* @type {number}
*/
times: 0,
/**
* 已開始記載
* @type {boolean}
*/
started: false,
/**
* 正在加載中
* @type {boolean}
*/
loading: false,
dom: null,
}
},
props: {
/**
* 初始化后自動開始加載數據
*/
autoload: {
type: Boolean,
default: true,
},
/**
* 離組件最近的可滾動父級元素（用于監聽事件及獲取滾動條位置）
*/
container: {
// Selector or Element
default: () => (global),
},
/**
* Axios請求參數配置對象
* {@link https://github.com/mzabriskie/axios#request-config}
*/
options: {
type: Object,
default: null,
},
/**
* 起始頁碼
*/
page: {
type: Number,
default: 1,
},
/**
* 每頁加載數據條數
*/
rows: {
type: Number,
default: 10,
},
/**
* 數據加載請求地址
*/
url: {
type: String,
default: '',
},
/**
* 距離底部多遠加載
*/
distance: {
type: Number,
default: 200,
},
},
computed: {
/**
* 是否可以加載
* @returns {boolean} 是與否
*/
loadable() {
return !this.started || (this.page + this.times) <= this.count
},
},
mounted() {
if (this.container !== global) {
this.dom = document.querySelector(this.container)
} else {
this.dom = this.container
}
if (!this.dom) {
return
}
this.dom.addEventListener('scroll', this.scroll, false)
if (this.autoload && !this.loading) {
this.load()
}
},
// eslint-disable-next-line
beforeDestroy() {
if (this.dom) {
this.dom.removeEventListener('scroll', this.scroll, false)
}
},
methods: {
/**
* 滾動鉤子
*/
scroll() {
const viewHeight = global.innerHeight
let parentNode
if (this.container !== global) {
parentNode = this.$el
} else {
parentNode = this.$el.parentNode
}
if (parentNode) {
const rect = parentNode.getBoundingClientRect()
if ((rect.bottom <= viewHeight + this.distance) && this.loadable && !this.loading) {
this.load()
}
}
},
/**
* 加載一組數據的方法
*/
load() {
if (this.loading) {
return
}
this.started = true
this.loading = true
const params = {
currentPage: this.page + this.times,
pageSize: this.rows,
}
const options = Object.assign({}, this.options, {
url: this.url,
cancelToken: new CancelToken((cancel) => {
this.cancel = cancel
}),
})
if (String(options.method).toUpperCase() === 'POST') {
options.data = Object.assign({}, options.data, params)
} else {
options.params = Object.assign({}, options.params, params)
}
this.$axios.request(options).then((res) => {
const data = res.result
this.times += 1
this.loading = false
this.count = data.pageCount
this.$emit('success', data.list)
this.$emit('complete')
}).catch((e) => {
this.loading = false
this.$emit('error', e)
this.$emit('complete')
})
},
/**
* 重置加載相關變量
*/
reset() {
this.count = 0
this.times = 0
this.started = false
this.loading = false
},
/**
*重新開始加載
*/
restart() {
this.reset()
this.load()
},
},
}
</script>
———————-我是分割線——————–
2017-09-18 組件優化
我們在寫組件時候，通常會大致先分為兩種，業務組件和通用組件，業務組件通和業務邏輯相關，一般作為一個業務模塊的局部組件， 比如列表中的列表項組件；通用組件適用面廣，不會和業務有牽扯，比如彈出框組件。
所以我們開始封裝一個組件的時候，就要劃分業務邏輯，做什么，不做什么，從外部接收什么，向外部提供什么，這個邊界應該非常清楚
但是之前的封裝的loadmore組件不太符合這一點，可能是項目一開始比較關注功能的實現，將其當成的一個業務組件撰寫，現在有一點需要優化：
之前我們傳入了各種請求相關的參數，包括url在組件內部完成加載和頁碼控制等一系列操作，顯然這不太符合組件功能職責單一化的原則， 其實組件內部并不關心加載到第幾頁或者是需要請求什么后端接口，而只要父組件告訴自己是否還可以加載就可以了， 至于加載請求列表，子組件通知父組件去加載就OK。
最終我們得到一個和業務完全分離的通用組件，代碼如下：
<template>
<div class="loadmore" ref="loadmore">
<div class="loadmore__body">
<slot></slot>
</div>
<div class="loadmore__footer">
<span v-if="loading">
<i class="tc-loading"></i>
<span>正在加載</span>
</span>
<span v-else-if="loading">正在加載...</span>
<span v-else>沒有更多了</span>
</div>
</div>
</template>
<script>
export default {
props: {
/**
* 是否加載
*/
loading: {
type: Boolean,
default: false,
},
/**
* 滾動外部容器, 選擇器字符串
*/
container: {
default: () => (global),
},
/**
* 距離底部多遠加載
*/
distance: {
type: Number,
default: 200,
},
},
data() {
return {
dom: null, // 外部容器dom
}
},
mounted() {
if (this.container !== global) {
this.dom = document.querySelector(this.container)
} else {
this.dom = this.container
}
if (!this.dom) {
return
}
this.dom.addEventListener('scroll', this.scroll, false)
if (this.autoload && !this.loading) {
this.load()
}
},
methods: {
/**
* 滾動鉤子
*/
scroll() {
if (!this.loading) {
return
}
const viewHeight = global.innerHeight
let parentNode
if (this.container !== global) {
parentNode = this.$el
} else {
parentNode = this.$el.parentNode
}
if (parentNode) {
const rect = parentNode.getBoundingClientRect()
if ((rect.bottom <= viewHeight + this.distance)) {
this.load()
}
}
},
/**
* 加載一組數據的方法
*/
load() {
this.$emit('load')
},
},
beforeDestroy() {
if (this.dom) {
this.dom.removeEventListener('scroll', this.scroll, false)
}
},
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.loadmore {
user-select: none;
&__footer {
color: #e4e4e4;
padding: 20px;
text-align: center;
}
.tc-loading {
~ span {
vertical-align: middle;
}
}
}
</style>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
