溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
之前缺乏移動端的經驗。一直不知道上拉加載，下拉刷新是怎么實現的。現在正好有個產品有這樣一個需求。想了一會沒有思路。就去找插件。啥vue-infinite-scroll，vue-virtual-scroll-list。啊呀，牛!無限滾動，十萬條數據渲染。
經過我一大圈的折騰。還是默默的卸載了插件。我只是需要實現一個下拉加載，不需要其他這么多的功能。看了看其他人的源碼，直接擼了起來，實現一個List組件。
效果展示
MList.vue
<template>
<div class="list-wrap">
<div class="content" ref="list" @scroll="onScroll">
<slot></slot>
</div>
<div class="loading" v-show="loading">正在加載數據......</div>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
components: {}
})
export default class extends Vue {
@Prop()
private loading!: boolean;
private onScroll() {
const obj: any = this.$refs.list;
// clientHeight 視口高度 scrollTop 滾動條離頂部的高度 scrollHeight 列表內容的高度
if (obj.clientHeight + obj.scrollTop === obj.scrollHeight) {
this.$emit("toBottom");
}
}
}
</script>
<style scoped lang="scss">
.list-wrap {
width: 100%;
height: 100%;
position: relative;
.content {
width: 100%;
height: 100%;
overflow-y: scroll;
}
.loading {
position: absolute;
bottom: -20px;
width: 100%;
height: 20px;
color: #ffffff;
}
}
::-webkit-scrollbar { // 去除滾動條邊框
width: 0 !important;
}
::-webkit-scrollbar {
width: 0 !important;
height: 0;
}
</style>
使用組件
<div class="body">
<m-list @toBottom="fetchNewData()" :loading="loading">
<code-info class="item" v-for="(item,index) in dataList" :key="index"></code-info>
</m-list>
</div>
private dataList: any[] = [1, 2, 3, 4, 5, 6, 7, 8];
private loading: boolean = false;
private fetchNewData() {
this.loading = true;
setTimeout(() => {
this.dataList.push(1, 2, 3);
const ref: any = this.$refs.vueLoad;
this.loading = false;
}, 1000);
}
這里需要注意的是m-list的父容器一定要固定高度，本例為body。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
