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

<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 });
    }
},


版权声明:本文为MICHAEL_PRINCE原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。