• refresh 刷新
  • 属性说明
  • 示例
    • 代码示例

refresh 刷新

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

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN
• JS
• CSS
• JSON

 
 
 

  
  
  
<view class="container {{theme}}" >
  
  
  
 <view class="refresh-wrap {{theme}}">
  
  
  
 <view class="mode-title {{theme}}">
  
  
  
 <view class="mode-title-line-left"></view>
  
  
  
 <view class="mode-title-text">手动下拉刷新</view>
  
  
  
 <view class="mode-title-line-right"></view>
  
  
  
 </view>
  
  
  
 <view
  
  
  
 class="smt-card-area"
  
  
  
 catch:touchstart="noop"
  
  
  
 catch:touchmove="noop"
  
  
  
 catch:touchend="noop"
  
  
  
 >
  
  
  
 <smt-feed
  
  
  
 class="smt-feed pull-down-refresh"
  
  
  
 ext-cls-feed="custom-cls-feed"
  
  
  
 ext-cls-loading="custom-cls-loading"
  
  
  
 theme="{{theme}}"
  
  
  
 pull-to-refresh
  
  
  
 bind:refresh="onRefresh"
  
  
  
 text="{{pullText}}"
  
  
  
 >
  
  
  
 <view class="list {{theme}}">
  
  
  
 <view
  
  
  
 class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
  
  
  
 s-for="val in list"
  
  
  
 style="{{theme === 'dark' ? 'border-bottom: solid 1px rgba(255, 255, 255, .2);' : 'border-bottom: solid 1px #e0e0e0;'}}"
  
  
  
 key="{{val}}"
  
  
  
 >
  
  
  
 <view class="left">
  
  
  
 <view class="row begin"></view>
  
  
  
 <view class="row center"></view>
  
  
  
 <view class="row end"></view>
  
  
  
 </view>
  
  
  
 <view class="right"></view>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
 </smt-feed>
  
  
  
 </view>
  
  
  
 </view>
  
  
  

  
  
  
 <view class="refresh-wrap">
  
  
  
 <view class="mode-title {{theme}}">
  
  
  
 <view class="mode-title-line-left"></view>
  
  
  
 <view class="mode-title-text">自动刷新</view>
  
  
  
 <view class="mode-title-line-right"></view>
  
  
  
 </view>
  
  
  
 <view class="smt-card-area" >
  
  
  
 <smt-feed
  
  
  
 class="smt-feed auto-refresh"
  
  
  
 ext-cls-feed="custom-cls-feed"
  
  
  
 theme="{{theme}}"
  
  
  
 disable-touch
  
  
  
 text="{{autoRefreshText}}"
  
  
  
 >
  
  
  
 <view class="list {{theme}}">
  
  
  
 <view
  
  
  
 class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
  
  
  
 s-for="val in list"
  
  
  
 style="{{theme === 'dark' ? 'border-bottom: solid 1px rgba(255, 255, 255, .2);' : 'border-bottom: solid 1px #e0e0e0;'}}"
  
  
  
 key="{{val}}"
  
  
  
 >
  
  
  
 <view class="left">
  
  
  
 <view class="row begin"></view>
  
  
  
 <view class="row center"></view>
  
  
  
 <view class="row end"></view>
  
  
  
 </view>
  
  
  
 <view class="right"></view>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
 </smt-feed>
  
  
  
 </view>
  
  
  
 </view>
  
  
  

  
  
  
 <view class="refresh-wrap">
  
  
  
 <view class="mode-title {{theme}}">
  
  
  
 <view class="mode-title-line-left"></view>
  
  
  
 <view class="mode-title-text">刷新失败</view>
  
  
  
 <view class="mode-title-line-right"></view>
  
  
  
 </view>
  
  
  
 <view class="smt-card-area fail" >
  
  
  
 <view class="fail {{fail ? 'enable' : ''}}"><view class="text">刷新失败</view></view>
  
  
  
 <smt-feed
  
  
  
 class="smt-feed auto-refresh-fail"
  
  
  
 ext-cls-feed="custom-cls-feed"
  
  
  
 theme="{{theme}}"
  
  
  
 disable-touch
  
  
  
 >
  
  
  
 <view class="list {{theme}}">
  
  
  
 <view
  
  
  
 class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
  
  
  
 s-for="val in list"
  
  
  
 style="{{theme === 'dark' ? 'border-bottom: solid 1px rgba(255, 255, 255, .2);' : 'border-bottom: solid 1px #e0e0e0;'}}"
  
  
  
 key="{{val}}"
  
  
  
 >
  
  
  
 <view class="left">
  
  
  
 <view class="row begin"></view>
  
  
  
 <view class="row center"></view>
  
  
  
 <view class="row end"></view>
  
  
  
 </view>
  
  
  
 <view class="right"></view>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
 </smt-feed>
  
  
  
 </view>
  
  
  
 </view>
  
  
  

  
  
  
 <view class="theme-control {{theme}}" >
  
  
  
 <text>沉浸式主题</text>
  
  
  
 <switch class="switch" color="{{dark ? '#f5f5f5' : '#ddd'}}" bind:change="themeChange"></switch>
  
  
  
 </view>
  
  
  
</view>
 
 
 

设计指南

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