支付宝小程序 UI·新手引导-欢迎弹层

2020-09-08 16:09 更新

本示例展示新手进入小程序时首页弹出的欢迎弹层,有助于提高用户对小程序的好感度。

使用说明

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

更多详情请参见 代码市场

使用指南

安装

在 IDE 安装以下依赖

npm i mashi-open-snippets --save

注册

在 JSON 中引入组件路径

{
  "usingComponents": {
    "move-demo": "mashi-open-snippets/es/welcome-popup/index"
  }}

调用

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

<view class="welcome-popup-page">
  <view class="welcome-popup-shadow">
    <welcome-popup />
  </view></view>
Page({
  data: {
  },
  onLoad() {
  },});
.welcome-popup-page {
    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;}


.welcome-popup-shadow{
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.7);
    display:flex;
    justify-content:center;
    align-items:center;}

属性

属性 类型 默认值 必填 描述
containerClassName String ““ 容器类名
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号