支付寶小程序 UI·刷臉動(dòng)畫

本示例展示信息查詢時(shí)的人臉認(rèn)證動(dòng)畫，生動(dòng)形象的動(dòng)畫效果有助于緩解用戶等待時(shí)的焦慮，提高用戶良好體驗(yàn)。

使用說(shuō)明

本示例為純客戶端代碼，可直接在模擬器和在真機(jī)預(yù)覽。

更多詳情請(qǐng)參見 代碼市場(chǎng)。

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

注冊(cè)

在 JSON 中引入組件路徑

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

? 調(diào)用

分別在 AXML、JS、ACSS 中輸入以下代碼

<view class="face">
  <view class="face-box">
    <view class="face-box-steps">
      <steps items="{{items}}" activeIndex="{{activeIndex}}"/>
    </view> 
    <view class="face-box-card">
      <face-animation-card />
    </view>
  </view>
  <view class="btn-wrap">
    <button class="btn" onTap="handleBackMiniApp" >同意并人臉驗(yàn)證</button>
    <view class="txt" onTap="toAgreementPage">查看<text class="text">《人臉識(shí)別認(rèn)證服務(wù)須知》</text></view>
  </view>
  <view class="face-bottom">
    本服務(wù)由人力資源和社會(huì)保障部提供
  </view></view>

Page({
  data: {
    items: [
      {
        title: "實(shí)體卡查詢",
        description: ""
      },
      {
        title: "人臉驗(yàn)證",
        description: ""
      },
      {
        title: "設(shè)置密碼",
        description: ""
      }
    ],
    activeIndex: 1
  },
  onLoad() {}});

page {
  background-color: #F7F7F7;
}
.face{
  padding-top:32rpx;
}
.face-box{
  width:702rpx;
  height:876rpx;
  background:#ffffff;
  margin:0 auto;
  border-radius: 16rpx;
  display:flex;
  flex-direction:column;
}
.face-box-steps{
   margin-top:50rpx
}
.face-box-card{
  margin-top:88rpx;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center
}
.btn-wrap {
  box-sizing: border-box;
}
.btn-wrap .btn {
  background: #1677FF;
  border-radius: 16rpx;
  width: 702rpx;
  height: 94rpx;
  margin: 51rpx auto 16rpx;
  font-size: 36rpx;
  color: #FFFFFF;
  display:flex;
  justify-content:center;
  align-items:center;
}
.btn-wrap .txt {
  font-size: 28rpx;
  color: #424242;
  padding:0 24rpx;
}
.btn-wrap .txt .text {
  color: #108EE9;
}
.face-bottom{
  font-family: PingFangSC-Regular;
  font-size: 20rpx;
  color: #C0C0C0;
  text-align: center;
  position:absolute;
  bottom:36rpx;
  width:100%;
}

屬性

?