title: refresh 刷新 header: develop nav: extended sidebar: smt-refresh

webUrl: https://qft12m.smartapps.cn/extensions/component/smt-refresh/smt-refresh

解释： 可用于页面任意区域；使用时需自行添加下拉逻辑改变offset-y参数；smt-feed组件对smt-refresh进行了封装，支持手势交互和api调起刷新。

属性说明

示例

在开发者工具中预览效果

扫码体验

图片示例

代码示例

:::codeTab

<!-- 刷新：不包含手势交互，需通过改变offset-y和status自定义交互 -->
<smt-refresh status="{{status}}" offset-y="{{offsetY}}" text="为您推荐xx条更新"></smt-refresh>
<!-- 信息流：包含手势交互 -->
<smt-feed
    class="smt-feed"
    theme="{{dark ? 'dark' : ''}}"
    pull-to-refresh
    bind:refresh="onRefresh"
    text="{{text}}"
>
    <list list="{{list}}" theme="{{dark ? 'dark' : ''}}"></list>
</smt-feed>

async onRefresh() {
    console.log('触发 onRefresh');
    const refresh = await selComponent(this, '.pull-down-refresh');
    const {code, data: list} = await this.fetchData();
    if (code !== 0) {
        swan.showToast({title: '网络错误', mask: true, icon: 'none'});
        refresh.closeLoading();
        return;
    }
    await syncSetData(this, {
        status: 1,
        list: list || this.data.list,
        text: list ? `本次共加载${list.length}条数据！` : '暂时没有更新，休息一下'
    });
    refresh.stopRefresh();
}

.smt-feed {
    height: 3.51rem;
    display: block;
    background-color: #fff;
}

:::