微信小程序点击其他元素,当前view隐藏实现方法(自测有用)
需求:点击设备的三个小点点,展示删除按钮。点击其他任意处时,让这个按钮隐藏。
实现思路:用一个模拟元素,接收点击“任意处位置”的tap事件。
先看架构:
<view class="item" bindtap="_clickItem">
<view class="title">
<view class="name">{{name}}</view>
<view class="function">
<view class="dot" hover-class="tap" hover-start-time="0" hover-stay-time="0" catchtap="_operation">
<view>.</view>
<view>.</view>
<view>.</view>
</view>
<view wx:if="{{show}}" class="bg" catchtap="_hide"></view>
<view wx:if="{{show}}" class="show">
<view class="delete" catchtap="_deleteItem">
<image src="/public/icon/delete.png" mode="widthFix" />
<view>解除</view>
</view>
</view>
</view>
</view>
<view class="_wrapper">
<image class="eq_icon" src="/public/icon/electronic_balance.png" mode="widthFix" />
<view class="status">已绑定</view>
</view>
</view>
css样式把.bg设置成固定定位,横向和竖向沾满屏幕
部分代码:
.tap {
opacity: 0.6;
}
.item .title {
display: flex;
justify-content: space-between;
}
.item .title .function {
position: relative;
}
.item .title .function>.dot {
padding: 0 10rpx;
}
.item .title .function>.dot>view {
height: 12rpx;
line-height: 4rpx;
font-weight: bold;
color: #c2c2c2;
}
.item ._wrapper {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-top: 70rpx;
}
.item ._wrapper .eq_icon {
width: 89rpx;
height: 89rpx;
}
.item ._wrapper .status {
font-size: 32rpx;
color: #c2c2c2;
}
.item .title .function .show {
position: absolute;
bottom: -100rpx;
right: -30rpx;
width: 100rpx;
background: #ffffff;
box-shadow: 0px 0px 9rpx 0px rgba(0, 0, 0, 0.5);
border-radius: 10rpx;
padding: 20rpx 30rpx;
z-index: 1001;//层级高于辅助元素
}
.item .title .function .show::after {
position: absolute;
content: "";
top: -15rpx;
right: 20%;
display: block;
width: 0;
height: 0;
border-radius: 4px;
border: 16rpx solid transparent;
border-left-color: #fff;
border-top-color: #fff;
transform: scaleX(0.8) rotate(45deg);
box-shadow: 0px 0px 9rpx 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.item .title .function .show::before {
position: absolute;
content: "";
width: 40rpx;
height: 24rpx;
top: -0rpx;
right: 16%;
background-color: rgb(255, 255, 255);
z-index: 2;
}
.item .title .function .show>view {
display: flex;
align-items: center;
justify-content: center;
color: #252525;
font-size: 28rpx;
}
.item .title .function .show .delete>image {
width: 28rpx;
height: 28rpx;
margin-right: 14rpx;
}
.item .title .function .bg{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1000;//层级高点,但是不能超过那个删除按钮的层级
}
js代码:
Component({
data: {
show: false
},
properties: {
name: String
},
methods: {
_operation() {
this.setData({
show: !this.data.show
})
},
_clickItem() {
this.triggerEvent('clickItem')
},
_hide() {
this.setData({
show: false
})
},
_deleteItem() {
let _this = this;
wx.showModal({
title: "是否解除当前设备?",
success() {
_this.triggerEvent('deleteItem')
},
complete() {
_this.setData({
show: false
})
}
})
}
}
})