codecamp

支付宝小程序 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 "" 步骤条下面的副文案
支付宝小程序 UI·新手引导-ETC 等待
支付宝小程序 UI·查询动画
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }