免费AI编程助手
百度智能小程序 加载
2020-09-03 16:18 更新
spin 加载
解释： 加载组件，可用于全屏和半屏。用于展示加载状态，点击加载、正在加载、加载完成、重新加载四种状态。
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| status | Number | 是 | 加载状态配置 | |
| theme | String | 否 | 主题配置，默认浅色；深色主题请指定 dark | |
| textConfig | Array | 否 | ['点击加载更多', '正在加载...', '已经到底啦', '加载失败 点击重新加载'] | 加载状态对应的文案 |
| secureBottom | Boolean | 否 | true | 默认兼容 iPhoneX 及以上型号底部安全区，非全屏可关闭 |
示例
代码示例
<view class="wrap {{theme}}">
<view class="container {{theme}}">
<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">
<view class="list {{theme}}">
<view
s-if="index === 0"
class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
s-for="val in actionList"
style="{{theme === 'dark' ? 'border-bottom: solid 1px #6d9ee1;' : 'border-bottom: solid 1px #e0e0e0;'}}"
key="{{val}}"
>
<view class="left">
<view class="row"></view>
<view class="row"></view>
<view class="row"></view>
</view>
<view class="right"></view>
</view>
<view
s-else
class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
s-for="val in list"
style="{{theme === 'dark' ? 'border-bottom: solid 1px #6d9ee1;' : 'border-bottom: solid 1px #e0e0e0;'}}"
key="{{val}}"
>
<view class="left">
<view class="row"></view>
<view class="row"></view>
<view class="row"></view>
</view>
<view class="right"></view>
</view>
</view>
<smt-spin secure-bottom="{{false}}" data-index="{{index}}" bindtap="spinHandle" status="{{item.status}}" theme="{{theme}}"></smt-spin>
</scroll-view>
</view>
<view class="card-area theme">
<view class="left">
<view class="line-01">沉浸式主题</view>
</view>
<switch color="{{theme === 'dark'? '#f5f5f5' : '#dddddd'}}" class="init-switch" disabled="false" bind:change="switchHandle"></switch>
</view>
</view>
</view>{
"navigationBarTitleText": "加载",
"navigationStyle": "default",
"usingComponents": {
"smt-spin": "@smt-ui/component/src/spin"
}
}
Page({
data: {
list: [1, 2, 3],
actionList: [1, 2, 3],
theme: '',
panelList: [
{
title: '手动上滑加载',
status: 1
},
{
title: '点击加载',
status: 0
},
{
title: '重新加载',
status: 3
}
]
},
/**
* 沉浸式主题切换按钮
*
* @param {Object} param switch 按钮默认返回参数
* @param {Object} param.detail switch 状态对象
*/
switchHandle({detail}) {
const checked = detail.checked;
this.setData({
theme: checked ? 'dark' : ''
});
swan.nextTick(() => {
swan.setBackgroundColor({
backgroundColor: checked ? '#3670c2' : '#f5f5f5'
});
});
},
/**
* 加载组件点击事件
*
* @param {*} e event
*/
spinHandle(e) {
let index = e.currentTarget.dataset.index;
let panelList = this.data.panelList;
if (panelList[index].status !== 1) {
panelList[index].status = 1;
this.setData({
panelList
}, () => {
setTimeout(() => {
panelList[index].status = (index === 1 ? 0 : 3);
this.setData({
panelList
});
}, 3000);
});
}
},
// 示例面板触底事件
lower() {
setTimeout(() => {
this.setData({
actionList: [
...this.data.actionList,
...this.data.list
]
});
}, 2000);
}
});* {
margin: 1;
padding: 0;
box-sizing: border-box;
}
.wrap {
font-size: .16rem;
padding-bottom: .5rem;
}
.mode-title {
display: flex;
justify-content: center;
align-items: center;
font-size: .16rem;
color: #000;
font-family: PingFangSC-Medium;
}
.mode-title-text {
margin: 0 .12rem;
}
.mode-title-line-left {
border-radius: 3px;
height: 1px;
width: .23rem;
background-image: linear-gradient(90deg, #f5f5f5 0%, #d5d5d5 100%);
}
.mode-title-line-right {
border-radius: 3px;
height: 1px;
width: .23rem;
background-image: linear-gradient(-90deg, #f5f5f5 0%, #d5d5d5 100%);
}
.theme-control{
width: 100%;
}
.wrap {
background-color: #f5f5f5;
transition: background-color 200ms linear;
}
.wrap.dark {
background-color: #3670c2;
}
.container {
padding-top: .2rem;
}
.container.dark .mode-title-text {
color: #fff;
transition: color 200ms linear;
}
.container.dark .mode-title .mode-title-line-left {
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
opacity: .3;
transition: background-image 200ms linear;
}
.container.dark .mode-title .mode-title-line-right {
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
opacity: .3;
transition: background-image 200ms linear;
}
.container.dark .card-area.theme {
color: #fff;
background-color: #4985da;
}
.container.dark .smt-card-area {
background-color: #4985da;
}
.container.dark .init-switch .swan-switch-input:after {
background: #38f;
}
.smt-card-area {
margin-top: 25.36rpx;
background-color: #fff;
}
.card-panel:first-child .smt-card-area {
height: 635.87rpx;
overflow: scroll;
}
.card-panel {
width: 100%;
margin-top: 72.46rpx;
}
.card-panel:first-child {
margin-top: 0;
}
.card-area.theme {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 28.382rpx 30.797rpx;
margin: 90.58rpx 0 0;
border: none;
border-radius: 0;
transition: background-color 200ms linear;
background: #fff;
}
.list {
transition: background-color 200ms linear;
padding: 0 .17rem;
}
.list-item {
display: flex;
justify-content: space-between;
height: 211.96rpx;
box-sizing: border-box;
flex: none;
padding: .17rem 0;
color: #fff;
}
.list-item .left {
display: flex;
flex: auto;
flex-flow: column nowrap;
}
.list-item .left .row {
width: 100%;
height: .19rem;
background: #e0e0e0;
transition: background-color 200ms linear;
margin-bottom: .06rem;
}
.list-item .left .row.end {
height: .12rem;
margin-top: .27rem;
margin-bottom: 0;
width: 1.15rem;
}
.list-item .right {
display: flex;
justify-content: center;
align-items: center;
color: #ccc;
width: 1.24rem;
height: .65rem;
margin-left: .17rem;
border-radius: .03rem;
background: #e0e0e0;
transition: background-color 200ms linear;
}
.list.dark {
background-color: transparent;
}
.list.dark .list-item .left .row,
.list.dark .list-item .right {
background-color: rgba(255, 255, 255, .2);
}设计指南
自定义文案（textConfig）时，文案内容应合理友好，且不超过 18 个中文字符。以下为建议文案可供参考：
以上内容是否对您有帮助：
更多建议：