vue vant组件实现的上拉加载下拉刷新样例

Html

<section>
 			// van-pull-refresh  下拉刷新
             <van-pull-refresh v-model="downLoading" @refresh="onRefresh"  success-text="刷新成功">
             //  van-list  上啦加载
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="暂无更多数据"
                @load="onLoad"
            >
            <div class="Transferlist" v-for="(item,index) in datalist" :key="index">
                <h1 v-if="item.trade_type === 1">转出 <span>{{item.currency_id}}</span></h1>
                <h1 v-if="item.trade_type === 2">转入 <span>{{item.currency_id}}</span></h1>
                <div class="hengtiao">
                    <p v-if="item.record_type === 1">购买 {{item.currency_name}}</p>
                    <p v-if="item.record_type === 2">出售 {{item.currency_name}}</p>
                    <p v-if="item.record_type === 3">充值 {{item.currency_name}}</p>
                    <p v-if="item.record_type === 4">提币 {{item.currency_name}}</p>
                    <p v-if="item.record_type === 5">转出 {{item.currency_name}}</p>
                    <p v-if="item.record_type === 6">转入 {{item.currency_name}}</p>
                    <p></p>
                    <p>{{item.price | keepsix}}</p>
                </div>
                <div class="hengshu">
                    <p></p>
                    <p></p>
                    <p style="color:#9EA8B8;font-size:.2rem;">{{item.created_at}}</p>
                </div>
            </div>
            <div class="Nodate" v-if="datalist.length === 0">
                <img src="../../assets/Mywallet/zanwulist.png" alt="">
                <!-- <p>暂无记录</p> -->
          </div>
          </van-list>
        </van-pull-refresh>
        </section>

为什么会连续触发 load 事件？

如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数，理想情况下每次请求获取的数据条数应能够填满一屏高度。

JS

<script>
export default {
    name: 'Myselfinfo',
    data () {
        return {
            loading: false,
            finished: false,
            // 下拉刷新
            downLoading: false,
            datalist: [],
            total: 1, // 总条数
            page: 0, // 页码
            raw: 10, // 每页条数
            OrderList: []
        }
    },
    created () {
    },
    methods: {
        // 下拉刷新
        onRefresh () {
            this.datalist = []
            this.page = 0
            this.finished = false
            this.onLoad()
        },
        // 加载默认
        async onLoad () {
            // const that = this
            this.page++
            const listdata = {
                page: this.page,
                listRows: this.raw,
                recordType: this.tokenIndex, // 导航栏
                currencyId: this.biList, // 币种
                startTime: this.start,
                endTime: this.end
            }
            const data = await detailRecordList(listdata)
            if (data.code === 200) {
                this.downLoading = false
                this.OrderList = data.data.data
                this.total = data.data.total
                this.datalist = [...this.datalist, ...data.data.data]
                console.log('ddd', this.datalist)
                this.loading = false
                // this.finished = true
                console.log(this.datalist.length, this.total)
                if (this.page >= data.data.last_page) {
                    this.finished = true
                    this.loading = false
                }
            }
        }
    }
}
</script>