vue 下拉重新整理下拉加載元件（請求封裝，搜尋）

元件内容

<template>
    <div class="list-module" ref="List">
        <mt-loadmore :top-method="pullRefresh" :bottom-all-loaded="allLoaded" ref="loadmore">
            <ul class="ulis" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
                :infinite-scroll-distance="distance">
                <li v-for="(item,index) in list" :key="index">
                    <slot :item="item" :index="index"></slot>
                </li>
            </ul>
            <!-- <p v-show="!loading" class="loading-state">
               <mt-spinner type="fading-circle" :size="30"></mt-spinner>
               &nbsp;&nbsp;&nbsp;加載中...
             </p>-->
            <p class="txt-center no-data" v-show="noData">暫無資料!</p>
            <div slot="top" class="loading-top-state">
            <span v-show="refreshing" style="display: inline-block">
              <mt-spinner type="snake" :size="30"></mt-spinner>
            </span>
            </div>
        </mt-loadmore>
    </div>
</template>
           

<script>
    export default {
        name: "newScroll",
        props: {
            interface: {
                type: String,
                default:''
            },
            size: {},
            param: {},
            distance: {
                default: 10
            },
            hasChange: {
                default: true
            }
        },
        data() {
            return {
                allLoaded: false,
                loading: false,
                refreshing: false,
                currentPage: -1,
                list: [],
                noData: false,
            }
        },
        watch: {
            interface() {
                if (!this.hasChange) {
                    this.currentPage = 0;
                    this.list = [];
                    this.getList();
                }
            },
            param: {
                handler() {
                    if (this.hasChange) {
                        this.currentPage = 0;
                        this.list = [];
                        this.getList()
                    }
                },
                deep: true
            }
        },
        updated() {
            this.$emit('change')
        },
        mounted() {
            this.$nextTick(() => {
                // 保證包裹下拉清單的div的高度
                this.h = document.documentElement.clientHeight - this.$refs.List.getBoundingClientRect().top
                this.$refs.List.style.height = this.h + 'px';
            })
        },
        methods: {
            deleteIndex(index) {
                this.list.splice(index, 1);
            },
            fresh() {
                this.currentPage = 0;
                this.list = [];
                this.getList();
            },
            // 下拉重新整理
            pullRefresh() {
                this.refreshing = true;
                this.currentPage = 0;
                this.list = [];
                this.getList();
            },
            // 上拉加載
            loadMore() {
                this.currentPage++;
                this.getList();
            },
            // 擷取清單
            getList() {
                let self = this;
                if(!self.interface){
                    return
                }
                let data = {
                    page: self.currentPage,
                    per_page: self.size
                };
                if (self.param) {
                    data = Object.assign(data, self.param)
                }
                self.$newAjax({
                    type: 'get',
                    url: self.interface,
                    data: data,
                    success(res) {
                        localStorage.setItem('_list_total', res.total);
                        if (res.err_code === '0') {

                            self.noData = res.total === '0';

                            self.list = self.list.concat(res.data);
                            self.$emit('changeList',self.list);
                            if (self.list.length === parseInt(res.total)) {
                                /*self.allLoaded = true;*/
                                self.loading = true;
                            } else {
                                self.loading = false;
                            }
                            setTimeout(() => {
                                if (self.refreshing) {
                                    self.refreshing = false;
                                    self.$refs.loadmore.onTopLoaded();
                                }
                            }, 1500)
                        }
                    },
                    dataError(res) {
                        self.loading = false;
                        console.log(res.err_msg);
                    }
                })
            }
        }
    }
</script>
           

<style scoped>
    .mint-spinner {
        display:inline-block;
        vertical-align:middle;
    }
    .list-module {
        overflow:scroll;
    }
    .no-more-data, .no-data {
        line-height:75px;
        font-size:32px;
    }
    .mint-loadmore {
        min-height:100%;
    }
</style>
           

調用頁面

<div class="search-area">
	<input class="txt-center" type="text" placeholder="搜尋" v-model="newData.name">
	<i class="iconfont icon-sousuo-"></i>
</div>
<new-scroll size=15 :interface="interFace" :param="newData" class="lists">
	<template slot-scope="slotProps">
		<ul class="list-content">
	  		<li style="width: 25%;">{{(slotProps.index)+1}}</li>
	 		<li style="width: 40%;">{{slotProps.item.created_at | cutBefore}}</li>
	  		<li style="width: 35%;">{{slotProps.item.number}}</li>
		</ul>
	</template>
</new-scroll>
           

記住需要import

data() {
            return {
              newData:{
                name:''
              },
              interFace:請求的接口
            }
        },
           

如果需要有底部固定的話可以再加一個鈎子函數

兩個定義分貝對應你自己設定的class

mounted() {
            // 控制清單的高度（減去底部高度）
            this.$nextTick(() => {
                let list = document.querySelector('.list-module');
                let bottom = document.querySelector('.toHome').clientHeight;
                list.style.height = parseFloat(list.style.height) - bottom + 'px';
            })
        },