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

喜欢ヅ旅行 2021-09-16 18:42 220阅读 0赞

> [https://mint-ui.github.io/docs/\#/zh-cn2/loadmore][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)
                }
            },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70 2]

<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>

[https_mint-ui.github.io_docs_zh-cn2_loadmore]: https://mint-ui.github.io/docs/#/zh-cn2/loadmore
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70]: /images/20210813/ebe981fc0dcc4ea2a09cf28b51f9ed6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70 1]: /images/20210813/5077425b487b4ea88bc74add9ffa0a0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70 2]: /images/20210813/8baec7e1e8f047a18312a04a48b44530.png