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

spin 加载

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

属性说明

属性名	类型	必填	默认值	说明
status	Number	是		加载状态配置。0：点击加载更多，1：自动加载更多，2：没有更多了，3：加载失败，重新加载
theme	String	否		主题配置，默认浅色；深色主题请指定 dark
textConfig	Array	否	[‘点击加载更多’, ‘正在加载…’, ‘已经到底啦’, ‘加载失败点击重新加载’]	加载状态对应的文案
secureBottom	Boolean	否	true	默认兼容 iPhoneX 及以上型号底部安全区，非全屏可关闭

示例

跳转编辑工具

在开发者工具中打开

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