支付宝小程序 UI·新手引导-ETC 等待

本示例展示新手接入 ETC 连接蓝牙或者其他设备时的等待界面。

使用说明

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

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

使用指南

安装

在 IDE 安装以下依赖

npm i mashi-open-snippets --save

注册

在 JSON 中引入组件路径

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

调用

分别在 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: '蓝牙连接激活中',
      waitingTime: 15,
      iconUrl: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*k5CAQ5LWSxYAAAAAAAAAAABkARQnAQ',
      iconWidth: '40rpx',
      iconHeight: '67rpx',
      info: '安装后请勿拆卸移动，否则设备将失效'
    }
  },
  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%;
}

属性

属性	类型	默认值	必填	描述
data	Array	{}	否	接收一个对象，其中 title 是主标题，waitingTime 是倒计时秒数（如果不传则默认为 15 秒），iconUrl 是小图标的链接地址，iconWidth 和 iconHeight 分别是小图标的长和宽（这两个属性若不传，小图标默认长宽是40rpx、67rpx），info 是提示信息。
onFinish	Function	() => {}	否	当倒计时结束时告知结束
containerClassName	String	""	否	组件类名