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

视频演示

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