美文网首页
uniapp之加载更多和返回顶部

uniapp之加载更多和返回顶部

作者: 锋叔 | 来源:发表于2021-11-11 12:14 被阅读0次

列表页到底部加载更多列表项,并有返回顶部按钮。

list.vue
<template>
    <view class="content">
        <view class="card" v-for="(item, index) in dataList" :key="item.orderId">
            <h1>我是{{index}}</h1>
        </view>
        <!-- 返回顶部 -->
        <u-back-top :scroll-top="scrollTop"></u-back-top>
        <!-- 加载更多 -->
        <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                loadStatus: 'nomore',
                page: 1,
                scrollTop: 0,
                dataList: []
            }
        },
        onLoad() {
            this.myOrders(1);
        },
        onReachBottom() {
            this.loadStatus = 'loading';
            // 模拟数据加载
            setTimeout(() => {
                this.addRandomData();
                this.loadStatus = 'nomore';
            }, 1000)
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        methods: {
            // 获取订单列表
            async myOrders(page) {
                if (page > 3) return;
                for (let i = page * 10; i < page * 10 + 10; i++) {
                    this.dataList.push(i);
                }
            },
            // 下拉加载更多
            async addRandomData() {
                this.page += 1;
                this.myOrders(this.page)
            }
        }
    }
</script>

<style scoped lang="scss">
    .content {
        padding: 10px;

        .card {
            height: 200px;
            border: 1px solid #000;
            margin-top: 10px;
            text-align: center;
            ling-height: 200px;
        }
    }
</style>

相关文章

网友评论

      本文标题:uniapp之加载更多和返回顶部

      本文链接:https://www.haomeiwen.com/subject/rxnwzltx.html