支付宝小程序 UI·查询动画

本示例展示进行信息查询时界面的动画效果，生动形象的动画有助于缓解用户等待时的焦虑。

使用说明

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

更多详情请参见 代码市场。

使用指南

安装

在 IDE 安装以下依赖

npm i mashi-open-snippets --save

注册

在 JSON 中引入组件路径

{
  "usingComponents": {
    "move-demo": "components/es/search-animation-card"
  }}

调用

分别在 AXML、JS、ACSS 中输入以下代码

<view class="search">
  <view class="search-box">
    <view class="search-box-steps">
      <steps items="{{items}}" activeIndex="{{activeIndex}}"/>
    </view> 
    <view class="search-box-card">
      <search-animation-card />
    </view>
  </view>
  <view class="search-bottom">
    本服务由人力资源和社会保障部提供
  </view></view>

Page({
  data: {
    items: [
      {
        title: "实体卡查询",
        description: ""
      },
      {
        title: "人脸验证",
        description: ""
      },
      {
        title: "设置密码",
        description: ""
      }
    ],
    activeIndex: 1
  },
  onLoad() {}});
page {
  background-color: #F7F7F7;}.search{
  padding-top:32rpx;}.search-box{
  width:702rpx;
  height:876rpx;
  background:#ffffff;
  margin:0 auto;
  border-radius: 16rpx;
  display:flex;
  flex-direction:column;}.search-box-steps{
   margin-top:50rpx
}.search-box-card{
  margin-top:68rpx;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center
}.search-bottom{
  font-family: PingFangSC-Regular;
  font-size: 20rpx;
  color: #C0C0C0;
  text-align: center;
  position:absolute;
  bottom:36rpx;
  width:100%;}

属性