@wines/backdrop

Backdrop 背景幕

在组件中设置显示蒙层。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Backdrop",
  "usingComponents": {
    "wux-button": "@wines/button",
    "wux-backdrop": "@wines/backdrop"
  }
}

示例

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

<wux-backdrop id="wux-backdrop" />

<view class="page">
	<view class="page__hd">
		<view class="page__title">Backdrop</view>
		<view class="page__desc">背景幕</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<view class="btn-group">
			<wux-button block type="light" bind:click="retain">保持背景幕 retain</wux-button>
			<wux-button block type="light" bind:click="release">释放背景幕 release</wux-button>
		</view>
		<view class="text-center">背景幕锁：{{ locks }}</view>
	</view>
</view>

import './index.less';
import { $wuxBackdrop, BackdropExports } from '@wines/backdrop';

let wuxBackdrop: BackdropExports;
Page({
  data: {
    locks: 0,
  },
  onLoad() {
    wuxBackdrop = $wuxBackdrop();
  },
  retain() {
    wuxBackdrop.retain();
    this.setData({
      locks: wuxBackdrop.backdropHolds,
    });
  },
  release() {
    wuxBackdrop.release();
    this.setData({
      locks: wuxBackdrop.backdropHolds,
    });
  },
});

API

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

Methods/Properties

• Backdrop.retain()
• Backdrop.release()
• Backdrop.backdropHolds