[log] vue使用Mint组件实现下拉刷新、上拉加载

最新推荐文章于 2025-06-19 22:23:49 发布

go_sparrow

最新推荐文章于 2025-06-19 22:23:49 发布

阅读量701

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/java_sparrow/article/details/83510490

log 同时被 3 个专栏收录

55 篇文章

订阅专栏

vue

13 篇文章

订阅专栏

html

11 篇文章

订阅专栏

本文详细介绍了如何使用Mint UI的Loadmore组件实现下拉刷新和上拉加载功能，通过具体代码示例展示了如何配置和使用该组件，包括监听状态变化、执行刷新和加载方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://mint-ui.github.io/docs/#/zh-cn2/loadmore
使用的vue

    <mt-loadmore
                :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                ref="loadmore"
                @top-status-change="handleTopChange"
                @bottom-status-change="handleBottomChange"
                bottomPullText="上拉加载"
                bottomDropText="释放加载"
                bottomLoadingText="加载中...">
            <div class="r2">
                <div class="res" v-for="(i,index) in 6" :key="index">
                   
            </div>
            <div slot="top" class="mint-loadmore-top">
                <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">下拉刷新</span>
                <span v-show="topStatus === 'loading'">刷新中...</span>
            </div>
        </mt-loadmore>

methods: {
            handleTopChange(status) {
                this.topStatus = status;
                console.log(status + '下拉刷新')

            },
            handleBottomChange(status) {
                console.log(status + '上拉加载')

            },
            loadTop() {
                console.log('执行刷新')
                this.$refs.loadmore.onTopLoaded();
            },
            onTopLoaded() {
                console.log('刷新方法执行')
            },
            loadBottom() {
                console.log('上拉加载执行')
                // 加载更多数据
                // this.allLoaded = true;// 若数据已全部获取完毕
                this.$refs.loadmore.onBottomLoaded();
            },
            onBottomLoaded() {
                console.log('加载方法执行')
            },
            goPath() {
                this.$router.push({path: '/card'});
            },
            goBack() {
                this.$router.back(-1)
            }
        },

在这里插入图片描述

<template>
    <section style="display: flex;height: 100%;flex-direction: column;">
        <x-header title="slot:overwrite-title" :left-options="{backText: ''}" style="background-color:#FFFFFF;">
            <div class="xheader-title" slot="overwrite-title" color="#333333;">首页</div>
        </x-header>
        <div class="main">
            <div class="r1">单位：元</div>
            <div class="r2">
                <mt-loadmore
                        :top-method="loadTop"
                        :bottom-method="loadBottom"
                        :bottom-all-loaded="allLoaded"
                        ref="loadmore"
                        @top-status-change="handleTopChange"
                        @bottom-status-change="handleBottomChange"
                        bottomPullText="上拉加载"
                        bottomDropText="加载更多"
                        bottomLoadingText="加载中...">
                    <div class="billlist">
                        <div class="bill" v-for="(i,index) in test" :key="index">
                            <div class="billr1">
                                <div>入款</div>
                                <div>100.00{{i}}</div>
                            </div>
                            <div class=" billr2">
                                <div>2018-11-23 11:03:03</div>
                                <div style="color: #005BAC">失败</div>
                            </div>
                        </div>

                    </div>
                    <div slot="top" class="mint-loadmore-top">
                        <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">下拉刷新</span>
                        <span v-show="topStatus === 'loading'">刷新中...</span>
                    </div>
                </mt-loadmore>
            </div>


            <div class="bottom">
                <div class="service">
                    <div class="from">底部</div>
                    <div class="phone">123456</div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import {XHeader} from 'vux';
    import {Toast, Loadmore} from 'mint-ui';

    export default {
        components: {
            XHeader,
        },
        data() {
            return {
               
                test: 10,
            }
        },
        methods: {

          

            handleTopChange(status) {
                this.topStatus = status;
                console.log(status + '下拉刷新')

            },
            handleBottomChange(status) {
                console.log(status + '上拉加载')

            },
            loadTop() {
                console.log('执行刷新')
                this.$refs.loadmore.onTopLoaded();
            },
            onTopLoaded() {
                console.log('刷新方法执行')
            },
            loadBottom() {
                console.log('上拉加载执行')
                this.test = this.test + 10;

                if (this.test > 30) {
                    this.allLoaded = true;
                }
                // 加载更多数据
                // this.allLoaded = true;// 若数据已全部获取完毕
                this.$refs.loadmore.onBottomLoaded();
            },
            onBottomLoaded() {
                console.log('加载方法执行')
            },


        },
        mounted() {

        },
    }
</script>
<style lang="scss" scoped>
    .main {
        border-top: 1px solid #B2B2B2;
        .r1 {
            display: flex;
            justify-content: flex-end;
            margin-right: 14px;
            color: #8B9094;
            margin-top: 9px;
            margin-bottom: 10px;
        }
        .r2 {
            margin-bottom: -116px;
            .billlist {

                padding-left: 15px;
                padding-right: 15px;
                background-color: white;
                .bill {
                    padding-top: 15px;
                    margin-bottom: 15px;

                    .billr1 {
                        display: flex;
                        justify-content: space-between;
                    }
                    .billr2 {
                        color: #8B9094;
                        margin-top: 8px;
                        display: flex;
                        justify-content: space-between;
                        padding-bottom: 7px;
                        border-bottom: 1px solid rgba(191, 191, 191, 0.81);
                    }

                }
            }
        }
        .bottom {
            bottom: 0px;
            margin-bottom: 20px;
            margin-top: 130px;
            width: 100%;
            .buy-button {
                margin: 0 15px;
                margin-bottom: 43px;
                height: 49px;
                line-height: 49px;
                text-align: center;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(0, 91, 172, 1);
                border-radius: 24px;

                span {
                    font-size: 18px;
                    font-weight: 500;
                    color: #005BAC;
                }
            }

            .service {
                text-align: center;

                .from {
                    font-size: 12px;
                    font-weight: 400;
                    color: rgba(90, 96, 101, 1);
                }

                .phone {
                    font-size: 12px;
                    font-weight: 400;
                    color: rgba(90, 96, 101, 1);

                    span {
                        color: #629DD2;
                    }
                }
            }
        }
    }
</style>