refresh 刷新

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

属性说明

属性名类型必填默认值说明
themeString-主题配置,默认浅色;深色主题请指定dark
loadingHgtNumber192px(需转换为设备尺寸)加载区域高度
offsetYNumber0垂直移动距离,*建议后续在sjs中使用
statusNumber0加载状态 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>
  3. <!-- 信息流:包含手势交互 -->
  4. <smt-feed
  5. class="smt-feed"
  6. theme="{{dark ? 'dark' : ''}}"
  7. pull-to-refresh
  8. bind:refresh="onRefresh"
  9. text="{{text}}"
  10. >
  11. <list list="{{list}}" theme="{{dark ? 'dark' : ''}}"></list>
  12. </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. }