Backdrop 背景幕

在组件中设置显示蒙层。

使用指南

在 page.json 中引入组件

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

示例

!> 该组件主要依靠 JavaScript 主动调用，所以一般只需在 wxml 中添加一个组件，并设置 id 为 #wux-backdrop 或其他，之后在 page.js 中调用 $wuxBackdrop(id) 获取匹配到的第一个组件实例对象。

  1. <wux-backdrop id="wux-backdrop" />
  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">Backdrop</view>
  6.         <view class="page__desc">背景幕</view>
  7.     </view>
  8.     <view class="page__bd page__bd_spacing">
  9.         <view class="btn-group">
  10.             <wux-button block type="light" bind:click="retain">保持背景幕 retain</wux-button>
  11.             <wux-button block type="light" bind:click="release">释放背景幕 release</wux-button>
  12.         </view>
  13.         <view class="text-center">背景幕锁：{{ locks }}</view>
  14.     </view>
  15. </view>
  1. import { $wuxBackdrop } from '../../dist/index'
  3. Page({
  4.     data: {
  5.         locks: 0,
  6.     },
  7.     onLoad() {
  8.         this.$wuxBackdrop = $wuxBackdrop()
  9.     },
  10.     retain() {
  11.         this.$wuxBackdrop.retain()
  12.         this.setData({
  13.             locks: this.$wuxBackdrop.backdropHolds
  14.         })
  15.     },
  16.     release() {
  17.         this.$wuxBackdrop.release()
  18.         this.setData({
  19.             locks: this.$wuxBackdrop.backdropHolds
  20.         })
  21.     }
  22. })

视频演示

Backdrop

API

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-backdrop
classNames any 过渡的类名，更多内置过渡效果请参考 AnimationGroup wux-animate—fadeIn
transparent boolean 是否显示透明蒙层 false
zIndex number 设置蒙层的 z-index 1000

Backdrop.method

  • Backdrop.retain
  • Backdrop.release