nutUI上拉刷新下拉加载的使用

<template>
    <div class="homeBox">
        会议广场
        <nut-scroller
            :is-un-more="isUnMore1" 
            :is-loading="isLoading1"
            :type="'vertical'"
            :stretch="50"
            :propsTime="500"
            :pulldownTxt="'下拉刷新1'"
            :loadMoreTxt="'上拉加载1'"
            :unloadMoreTxt="'没有更多了1'"
            @loadMore="loadMoreVert"
            @pulldown="pulldown"
        > 
            <div slot="list" class="nut-vert-list-panel">
                <div class="nut-vert-list-item" v-for="(item, index) of listData1" :key="index">
                    <dl class="nut-scroller-item-info">
                        <dt>防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音</dt>
                        <dd>2018-02-25</dd>
                    </dl>
                </div>
            </div>
        </nut-scroller>
    </div>
</template>

<script>
export default {
    computed: {
    },
    data(){
        return{
            listData1: new Array(20),
            isUnMore1: false,
            isLoading1: false,
            page1: 2,
            maxPages2: 1,
            timers: null,
        }
    },
    created(){
    },
    methods: {
        loadMoreVert() {
            this.isLoading1 = true;
            if (this.page1 > this.maxPages) {
                this.isUnMore1 = true;
                this.isLoading1 = false;
            } else {
                clearTimeout(this.timers);
                this.timer = setTimeout(() => {
                    this.isLoading1 = false;
                    this.isUnMore1 = false;
                    this.listData1 = new Array(20 * this.page1);
                    this.page1 = ++this.page1;
                }, 300);
            }
        },

        pulldown() {
            this.isLoading1 = true;
            clearTimeout(this.timers);
            this.timer = setTimeout(() => {
                this.isLoading1 = false;
                this.isUnMore1 = false;
                this.listData1 = new Array(20);
                this.page1 = 2;
            }, 3000);
        },
    },
}
</script>

<style scoped lang="scss">
.homeBox{
    position: absolute;
    top:0;
    left:0;
    bottom:70px;
    right:0;
}
</style>

文档地址:http://nutui.jd.com/#/Scroller

猜你喜欢

转载自www.cnblogs.com/fqh123/p/12152981.html