支付寶小程序 UI·新手引導(dǎo)-引導(dǎo)插畫(huà)

本示例展示小程序內(nèi)的引導(dǎo)插畫(huà)，一般出現(xiàn)在用戶首次使用小程序情況下，幫助用戶快速熟悉小程序功能。

使用說(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-guide-illustration/index"
  }}

調(diào)用

分別在 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;}

屬性