支付寶小程序 UI·新手引導(dǎo)-ETC 等待

本示例展示新手接入 ETC 連接藍(lán)牙或者其他設(shè)備時(shí)的等待界面。

?使用說(shuō)明

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

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

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

?注冊(cè)

在 JSON 中引入組件路徑

{
  "usingComponents": {
    "move-demo": "mashi-open-snippets/es/etc-waiting-card/index"
  }}

調(diào)用

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

<view class="etc-waiting-card-page">
    <view>
        <lottie id="lottie-step1" class="etc-waiting-card-lottie" path="https://gw.alipayobjects.com/os/basement_prod/0b3db301-a9be-49d1-878e-256294d4185c.json" speed="1.0" autoplay="{{true}}" repeatCount="-1" />
    </view>
    <view>
        <etc-waiting-card data="{{item}}" onFinish="onFinish" />
    </view>
</view>

Page({
  data: {
    item: {
      title: '藍(lán)牙連接激活中',
      waitingTime: 15,
      iconUrl: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*k5CAQ5LWSxYAAAAAAAAAAABkARQnAQ',
      iconWidth: '40rpx',
      iconHeight: '67rpx',
      info: '安裝后請(qǐng)勿拆卸移動(dòng)，否則設(shè)備將失效'
    }
  },
  onLoad() { },
  onFinish(val) {
    console.log(val);
  }
});

.etc-waiting-card-page {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    background-color:rgb(242, 242, 242);
    height:100vh;
    box-sizing:border-box;
    background-image:url(https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*oiCQSpnrPhYAAAAAAAAAAABkARQnAQ);
    background-size:100%;
}


.etc-waiting-card-page >:first-child{
    position: absolute;
    top: 200rpx;
}


.etc-waiting-card-lottie{
    width: 750rpx;
    height: 650rpx;
}


.etc-waiting-card-page >:last-child{
    width:100%;
}

屬性