• 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 个中文字符。以下为建议文案可供参考：