支付宝小程序 UI·步骤条

2020-09-08 16:09 更新

本示例展示用户使用小程序的步骤,帮助掌握当前进展。

使用说明

本示例为纯客户端代码,可直接在模拟器和在真机预览。

更多详情请参见 代码市场

使用指南

安装

在 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 "" 步骤条下面的副文案
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号