支付宝小程序 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 | "" | 否 | 组件类名 |