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

posted @   古墩古墩  Views(2076)  Comments(0Edit  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示