Backdrop 背景幕
在组件中设置显示蒙层。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "Backdrop",
"usingComponents": {
"wux-button": "../../dist/button/index",
"wux-backdrop": "../../dist/backdrop/index"
}
}
示例
!> 该组件主要依靠 JavaScript 主动调用,所以一般只需在 wxml 中添加一个组件,并设置 id 为 #wux-backdrop
或其他,之后在 page.js 中调用 $wuxBackdrop(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 { $wuxBackdrop } from '../../dist/index'
Page({
data: {
locks: 0,
},
onLoad() {
this.$wuxBackdrop = $wuxBackdrop()
},
retain() {
this.$wuxBackdrop.retain()
this.setData({
locks: this.$wuxBackdrop.backdropHolds
})
},
release() {
this.$wuxBackdrop.release()
this.setData({
locks: this.$wuxBackdrop.backdropHolds
})
}
})
视频演示
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