支付宝小程序 UI·新手引导-引导插画

本示例展示小程序内的引导插画，一般出现在用户首次使用小程序情况下，帮助用户快速熟悉小程序功能。

使用说明

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

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

使用指南

安装

在 IDE 安装以下依赖

npm i mashi-open-snippets --save

注册

在 JSON 中引入组件路径

{
  "usingComponents": {
    "move-demo": "mashi-open-snippets/es/etc-guide-illustration/index"
  }}

调用

分别在 AXML、JS、ACSS 中输入以下代码

<view class="etc-guide-illustration-page1">
    <view>
        <etc-guide-illustration type="{{type1}}"/>
    </view>
    <view></view></view>
Page({
  data: {
    type1: 'traffic',
    type2: 'discounts',
    type3: 'signIn',
  },
  onLoad() { },});

.etc-guide-illustration-page1 {
    height:100vh;
    box-sizing:border-box;
    background-image: url(https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*0u9RRZmKTcAAAAAAAAAAAABkARQnAQ);
    background-repeat:no-repeat;
    background-size:cover;
    z-index:1;
    overflow:hidden;}.etc-guide-illustration-page1 >view:first-child{
    position: absolute;
    left:56rpx;
    top:280rpx;
    z-index:20;
    background: transparent;}.etc-guide-illustration-page1 >view:last-child{
    position: absolute;
    background-image: url(https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*mJx6Srpe7d4AAAAAAAAAAABkARQnAQ);
    background-repeat:no-repeat;
    background-size:cover;
    z-index:10;
    width:750rpx;
    height:706rpx;}

属性

属性	类型	默认值	必填	描述
type	Number	1	否	组件的类型，一共有三种，分别为："traffic","discounts","signIn"
containerClassName	String	““	否	容器类名