mint-ui的Loadmore组件使用示例

Posted 2020-11-17 kerryw

<template>
    <div class="director-mail">
        <mt-header fixed title="标题">
            <router-link to="/" slot="right">
                <mt-button>右侧文字</mt-button>
            </router-link>
        </mt-header>

        <!--主要内容-->
        <div class="page-loadmore">
            <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + ‘px‘ }">
                <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
                             :bottom-all-loaded="allLoaded" ref="loadmore">
                    <ul class="page-loadmore-list">
                        <li v-for="item in list" class="page-loadmore-listitem">
                            {{ item }}
                        </li>
                    </ul>
                    <div slot="bottom" class="mint-loadmore-bottom">
                        <span v-show="bottomStatus !== ‘loading‘" :class="{ ‘is-rotate‘: bottomStatus === ‘drop‘ }">↑</span>
                        <span v-show="bottomStatus === ‘loading‘">
                        <mt-spinner type="snake"></mt-spinner>
                      </span>
                    </div>
                </mt-loadmore>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                allLoaded: false,
                bottomStatus: ‘‘,
                wrapperHeight: 0
            };
        },

        methods: {
            handleBottomChange(status) {
                this.bottomStatus = status;
            },

            loadBottom() {
                setTimeout(() => {
                    let lastValue = this.list[this.list.length - 1];
                    if (lastValue < 40) {
                        for (let i = 1; i <= 10; i++) {
                            this.list.push(lastValue + i);
                        }
                    } else {
                        this.allLoaded = true;
                    }
                    this.$refs.loadmore.onBottomLoaded();
                }, 1500);
            }
        },

        created() {
            for (let i = 1; i <= 10; i++) {
                this.list.push(i);
            }
        },

        mounted() {
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        },
    };
</script>

<style lang=‘less‘>
    .director-mail {
        .page-loadmore {
            margin-top: 40px;
            overflow: scroll;
            .page-loadmore-list {
                .page-loadmore-listitem {
                    height: 100px;
                    line-height: 100px;
                    border-bottom: solid 1px #eee;
                    text-align: center;
                }
            }

            .mint-loadmore-bottom {
                span {
                    display: inline-block;
                    transition: .2s linear;
                    vertical-align: middle;

                }
                .mint-spinner {
                    display: inline-block;
                    vertical-align: middle;
                }
            }
        }

    }

</style>