• spin 加载
  • 属性说明
  • 示例
    • 代码示例

spin 加载

解释：加载组件，可用于全屏和半屏。用于展示加载状态，点击加载、正在加载、加载完成、重新加载四种状态。

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN
• JS
• CSS
• JSON

 
 
 

  
  
  
<view class="wrap {{dark ? 'dark' : ''}}">
  
  
  
 <view class="container {{dark ? 'dark' : ''}}">
  
  
  
 <view class="card-panel" s-for="item,index in panelList">
  
  
  
 <view class="mode-title">
  
  
  
 <view class="mode-title-line-left"></view>
  
  
  
 <view class="mode-title-text">{{item.title}}</view>
  
  
  
 <view class="mode-title-line-right"></view>
  
  
  
 </view>
  
  
  
 <scroll-view scroll-y bind:scrolltolower="lower" class="smt-card-area">
  
  
  
 <list list="{{index === 0 ? actionList : list}}" theme="{{dark ? 'dark' : ''}}"></list>
  
  
  
 <smt-spin secure-bottom="{{false}}" data-index="{{index}}" bindtap="spinHandle" status="{{item.status}}" theme="{{dark ? 'dark' : ''}}"></smt-spin>
  
  
  
 </scroll-view>
  
  
  
 </view>
  
  
  
 <view class="card-area theme">
  
  
  
 <view class="left">
  
  
  
 <view class="line-01">沉浸式主题</view>
  
  
  
 </view>
  
  
  
 <switch color="{{dark ? '#f5f5f5' : '#dddddd'}}" class="init-switch" disabled="false" bind:change="switchHandle"></switch>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>
 
 
 

设计指南

自定义文案（textConfig）时，文案内容应合理友好，且不超过 18 个中文字符。以下为建议文案可供参考：