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

本文介绍如何在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 });
    }
},

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

inticaler

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值