支付宝小程序 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 | ““ | 否 | 容器类名 |
以上内容是否对您有帮助:
更多建议: