zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    前沿科技相关
    52ABP
    C#常用及注意点
    电商秒杀系统:电商微服务框架组件
    面向对象OOP
    《CLR via C#》书籍
    .NET发布时选择【独立部署模式】引发的故事
    unity 3D物体使用EventSystem响应事件
    协程
    unity 2d碰撞/ui组件碰撞
  • 原文地址:https://www.cnblogs.com/fqh123/p/12152981.html
Copyright © 2011-2022 走看看