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

2020-09-08 16:09 更新

本示例展示新手接入 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 "" 组件类名
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号