小程序 scroll-view 下拉刷新和触底加载方法定义

原创已于 2022-02-16 12:02:13 修改 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #vue.js

于 2022-02-16 12:02:04 首次发布

小程序专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在Vue滚动视图中使用scroll-view组件实现下拉刷新和触底加载功能，包括refresher相关API的使用和数据接口的异步调用，确保了用户界面的交互流畅和数据的动态更新。

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

<scroll-view
     scroll-y
     id="scroller"
     refresher-enabled="{{ true }}"
     refresher-threshold="{{ 45 }}"
     refresher-triggered="{{ refresherTriggered }}"
     bind:scrolltolower="onScrollToLower"
     bind:refresherrefresh="refresherrefresh"
     bind:refresherrestore="refresherrestore"
     bind:refresherabort="refresherabort">
     // 内容
</scroll-view>

// 触底加载
onScrollToLower() {
    let { params } = this.data;
    ++ params.page;
    this.setData({ params });
    if (params.moreList) {
        this.onRequireNoticeList();
    }
},
// 下拉刷新
async refresherrefresh(){
    let { _refresherTriggered, refresherTriggered } = this.data;
    if (_refresherTriggered) return
    _refresherTriggered = true;
    //界面下拉触发，triggered可能不是true，要设为true
    if (!refresherTriggered) refresherTriggered = true;
    this.onResetList();
    await this.onRequireNoticeList();
    refresherTriggered = false;//触发onRestore，并关闭刷新图标
    _refresherTriggered = false;
    this.setData({ _refresherTriggered, refresherTriggered });
},
// 下拉刷新被复位
refresherrestore(){
    let { _refresherTriggered, refresherTriggered } = this.data;
    refresherTriggered = false;
    _refresherTriggered = false;
    this.setData({ _refresherTriggered, refresherTriggered });
},
// 下拉刷新被中止
refresherabort(){
    let { _refresherTriggered, refresherTriggered } = this.data;
    refresherTriggered = false;
    _refresherTriggered = false;
    this.setData({ _refresherTriggered, refresherTriggered });
},

相应的获取数据的接口可以这样写

async onRequireList() {
    let { params, planList, options } = this.data;
    let { data, status } = await selectSupplierMyJoinPlanForApplet(params);
    if (status === '200') {
        if (data.list.length != 0) {
            if (data.list.length < params.limit) {
                params.moreList = false;
            }
            planList = [...planList, ...data.list];
            params.page = data.currPage;
        } else {
            params.moreList = false;
        }
        this.setData({ planList, params });
    }
},