Landscape 压屏窗

用于在浮层中显示广告或说明。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Landscape",
  3. "usingComponents": {
  4. "wux-button": "../../dist/button/index",
  5. "wux-landscape": "../../dist/landscape/index"
  6. }
  7. }

示例

  1. <wux-landscape visible="{{ visible1 }}" bind:close="onClose1">
  2. <image src="https://wux.cdn.cloverstd.com/redpacket.png" style="height: 350px" />
  3. </wux-landscape>
  4. <wux-landscape visible="{{ visible2 }}" bind:close="onClose2" mask="{{ false }}">
  5. <image src="https://wux.cdn.cloverstd.com/redpacket.png" style="height: 350px" />
  6. </wux-landscape>
  7. <view class="page">
  8. <view class="page__hd">
  9. <view class="page__title">Landscape</view>
  10. <view class="page__desc">压屏窗</view>
  11. </view>
  12. <view class="page__bd page__bd_spacing">
  13. <wux-button block type="light" bind:click="onOpen1">Default</wux-button>
  14. <wux-button block type="light" bind:click="onOpen2">No mask</wux-button>
  15. </view>
  16. </view>
  1. Page({
  2. data: {
  3. visible1: false,
  4. visible2: false,
  5. },
  6. onOpen1() {
  7. this.setData({
  8. visible1: true,
  9. })
  10. },
  11. onOpen2() {
  12. this.setData({
  13. visible2: true,
  14. })
  15. },
  16. onClose1() {
  17. this.setData({
  18. visible1: false,
  19. })
  20. },
  21. onClose2() {
  22. this.setData({
  23. visible2: false,
  24. })
  25. },
  26. })

视频演示

Landscape

API

Landscape props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-landscape
closable boolean 是否显示关闭按钮 true
mask boolean 是否显示蒙层 true
maskClosable boolean 点击蒙层是否允许关闭 false
visible boolean 是否可见 false
bind:close function 关闭时的回调 -

Landscape slot

名称 描述
- 自定义内容

Landscape externalClasses

名称 描述
wux-class 根节点样式类