refresh 刷新

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

属性说明

属性名类型必填默认值说明
themeString否-主题配置，默认浅色；深色主题请指定dark
loadingHgtNumber否192px（需转换为设备尺寸）加载区域高度
offsetYNumber否0垂直移动距离，*建议后续在sjs中使用
statusNumber否0加载状态 0: 未开始 1: 加载中 2: 展示话术
textString否建议最多显示18个汉字，超出内容截断加载成功时的展示话术

示例

在开发者工具中预览效果

扫码体验

refresh 刷新 - 图1

图片示例

refresh 刷新 - 图2

代码示例

  1. <!-- 刷新：不包含手势交互，需通过改变offset-y和status自定义交互 -->
  2. <smt-refresh status="{{status}}" offset-y="{{offsetY}}" text="为您推荐xx条更新"></smt-refresh>
  4. <!-- 信息流：包含手势交互 -->
  5. <smt-feed
  6.     class="smt-feed"
  7.     theme="{{dark ? 'dark' : ''}}"
  8.     pull-to-refresh
  9.     bind:refresh="onRefresh"
  10.     text="{{text}}"
  11. >
  12.     <list list="{{list}}" theme="{{dark ? 'dark' : ''}}"></list>
  13. </smt-feed>
  1. async onRefresh() {
  2.     console.log('触发 onRefresh');
  3.     const refresh = await selComponent(this, '.pull-down-refresh');
  4.     const {code, data: list} = await this.fetchData();
  5.     if (code !== 0) {
  6.         swan.showToast({title: '网络错误', mask: true, icon: 'none'});
  7.         refresh.closeLoading();
  8.         return;
  9.     }
  10.     await syncSetData(this, {
  11.         status: 1,
  12.         list: list || this.data.list,
  13.         text: list ? `本次共加载${list.length}条数据！` : '暂时没有更新，休息一下'
  14.     });
  15.     refresh.stopRefresh();
  16. }
  1. .smt-feed {
  2.     height: 3.51rem;
  3.     display: block;
  4.     background-color: #fff;
  5. }