支付宝小程序 UI·步骤条
本示例展示用户使用小程序的步骤,帮助掌握当前进展。
使用说明
本示例为纯客户端代码,可直接在模拟器和在真机预览。
更多详情请参见 代码市场。
使用指南
安装
在 IDE 安装以下依赖
npm i mashi-open-snippets --save
注册
在 JSON 中引入组件路径
{
"usingComponents": {
"move-demo": "components/es/steps"
}}
调用
分别在 AXML、JS、ACSS 中输入以下代码
<view class="search-main">
<view class="search-main-box">
<view class="search-main-box-steps">
<steps items="{{items}}" activeIndex="{{activeIndex}}"/>
</view>
<view class="search-main-box-card">
<face-animation-card />
</view>
</view></view>
Page({
data: {
items: [
{
title: "信息确认",
description: "用户身份确认"
},
{
title: "功能确认",
description: "先乘车 后付款"
}
],
activeIndex: 1
},
onLoad() {}});
page {
background-color: #F7F7F7;}.search-main{
padding-top:32rpx;}.search-main-box{
width:702rpx;
height:905rpx;
background:#ffffff;
margin:0 auto;
border-radius: 16rpx;
display:flex;
flex-direction:column;}.search-main-box-steps{
margin-top:50rpx
}.search-main-box-card{
margin-top:80rpx
}
属性
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
activeIndex | Number | 1 | 否 | 当前活动步骤 |
containerClassName | String | ““ | 否 | 容器类名 |
items | List | [] | 是 | 步骤条下面的文字提示 |
title | String | “” | 是 | 步骤条下面的主文案 |
description | String | "" | 是 | 步骤条下面的副文案 |