refresh 刷新

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

属性说明

属性名类型必填默认值说明

theme

String

否

-

主题配置，默认浅色；深色主题请指定 dark

loadingHgt

Number

否

192px（需转换为设备尺寸）

加载区域高度

offsetY

Number

否

0

垂直移动距离，建议后续在 sjs 中使用

status

Number

否

0

加载状态，0：未开始，1：加载中，2：展示话术

text

String

否

建议最多显示 18 个汉字，超出内容截断

加载成功时的展示话术

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

代码示例

  • SWAN
  • JS
  • CSS
  • JSON
  1. <view class="container {{theme}}" >
  2.     <view class="refresh-wrap {{theme}}">
  3.         <view class="mode-title {{theme}}">
  4.             <view class="mode-title-line-left"></view>
  5.             <view class="mode-title-text">手动下拉刷新</view>
  6.             <view class="mode-title-line-right"></view>
  7.         </view>
  8.         <view
  9.             class="smt-card-area"
  10.             catch:touchstart="noop"
  11.             catch:touchmove="noop"
  12.             catch:touchend="noop"
  13.         >
  14.             <smt-feed
  15.                 class="smt-feed pull-down-refresh"
  16.                 ext-cls-feed="custom-cls-feed"
  17.                 ext-cls-loading="custom-cls-loading"
  18.                 theme="{{theme}}"
  19.                 pull-to-refresh
  20.                 bind:refresh="onRefresh"
  21.                 text="{{pullText}}"
  22.             >
  23.                 <view class="list {{theme}}">
  24.                     <view
  25.                         class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
  26.                         s-for="val in list"
  27.                         style="{{theme === 'dark' ? 'border-bottom: solid 1px rgba(255, 255, 255, .2);' : 'border-bottom: solid 1px #e0e0e0;'}}"
  28.                         key="{{val}}"
  29.                     >
  30.                         <view class="left">
  31.                             <view class="row begin"></view>
  32.                             <view class="row center"></view>
  33.                             <view class="row end"></view>
  34.                         </view>
  35.                         <view class="right"></view>
  36.                     </view>
  37.                 </view>
  38.             </smt-feed>
  39.         </view>
  40.     </view>
  42.     <view class="refresh-wrap">
  43.         <view class="mode-title {{theme}}">
  44.             <view class="mode-title-line-left"></view>
  45.             <view class="mode-title-text">自动刷新</view>
  46.             <view class="mode-title-line-right"></view>
  47.         </view>
  48.         <view class="smt-card-area" >
  49.             <smt-feed
  50.                 class="smt-feed auto-refresh"
  51.                 ext-cls-feed="custom-cls-feed"
  52.                 theme="{{theme}}"
  53.                 disable-touch
  54.                 text="{{autoRefreshText}}"
  55.             >
  56.                  <view class="list {{theme}}">
  57.                     <view
  58.                         class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
  59.                         s-for="val in list"
  60.                         style="{{theme === 'dark' ? 'border-bottom: solid 1px rgba(255, 255, 255, .2);' : 'border-bottom: solid 1px #e0e0e0;'}}"
  61.                         key="{{val}}"
  62.                     >
  63.                         <view class="left">
  64.                             <view class="row begin"></view>
  65.                             <view class="row center"></view>
  66.                             <view class="row end"></view>
  67.                         </view>
  68.                         <view class="right"></view>
  69.                     </view>
  70.                 </view>
  71.             </smt-feed>
  72.         </view>
  73.     </view>
  75.     <view class="refresh-wrap">
  76.         <view class="mode-title {{theme}}">
  77.             <view class="mode-title-line-left"></view>
  78.             <view class="mode-title-text">刷新失败</view>
  79.             <view class="mode-title-line-right"></view>
  80.         </view>
  81.         <view class="smt-card-area fail" >
  82.             <view class="fail {{fail ? 'enable' : ''}}"><view class="text">刷新失败</view></view>
  83.             <smt-feed
  84.                 class="smt-feed auto-refresh-fail"
  85.                 ext-cls-feed="custom-cls-feed"
  86.                 theme="{{theme}}"
  87.                 disable-touch
  88.             >
  89.                  <view class="list {{theme}}">
  90.                     <view
  91.                         class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
  92.                         s-for="val in list"
  93.                         style="{{theme === 'dark' ? 'border-bottom: solid 1px rgba(255, 255, 255, .2);' : 'border-bottom: solid 1px #e0e0e0;'}}"
  94.                         key="{{val}}"
  95.                     >
  96.                         <view class="left">
  97.                             <view class="row begin"></view>
  98.                             <view class="row center"></view>
  99.                             <view class="row end"></view>
  100.                         </view>
  101.                         <view class="right"></view>
  102.                     </view>
  103.                 </view>
  104.             </smt-feed>
  105.         </view>
  106.     </view>
  108.     <view class="theme-control {{theme}}" >
  109.         <text>沉浸式主题</text>
  110.         <switch class="switch" color="{{dark ? '#f5f5f5' : '#ddd'}}" bind:change="themeChange"></switch>
  111.     </view>
  112. </view>

设计指南

在刷新方式上，建议必配手动刷新，避免出现用户无法主动操作的情况。
自定义反馈文案（text）时，文案内容应合理友好，且不超过 18 个中文字符。以下为建议文案可供参考：
refresh 刷新 - 图2