小程序
小游戏
企业微信
微信支付
扫描小程序码分享
page-container 默认点击遮盖层会关闭组件，怎么才能设置禁止点击遮盖层关闭组件？
8 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
把 page-container 铺满整个页面，自己做遮罩层
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
<!-- wxml -->
<page-container show="{{true}}">
<view class="detail-mask" catchtouchmove="stopTouchMove"></view>
<view class="detail-page" catchtouchmove="stopTouchMove">
<!-- 你的代码 -->
</view>
</page-container>
/* wxss */
.detail-mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.detail-page {
position: relative;
min-height: 300px;
// js
stopTouchMove() {}, // 阻止穿透蒙层
<!--components/w-popup/w-popup.wxml--> <view class="w-popup-wrapper" wx:if="{{showComputed}}" > <page-container custom-style="background-color: rgba(0, 0, 0, 0);" show="{{visable}}" overlay="{{false}}" z-index="{{zIndex}}" close-on-slide-down="{{false}}" bind:clickoverlay="closeOnMask" bind:beforeenter="beforeEnter" bind:afterleave="afterLeave" bind:beforeleave="beforeleave" > <view class="w-popup {{ show ? 'w-popup-show' : 'w-popup-close'}}"> <view class="w-popup-content"> <view class="w-popup-content-bottom-nav" wx:if="{{position === 'bottom' && showBottomNav }}" > <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-left" bind:tap="close" > 取消 </view> <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-right" bind:tap="confirm" > 确定 </view> </view> <view class="w-popup-content-bottom-slot"> <slot/> </view> </view> </view> </page-container> <view bind:tap="closeOnMask" style="z-index: {{zIndex - 1}};" class="w-popup-overlay {{visable ? 'w-popup-overlay-show' : 'w-popup-overlay-close'}}" /> </view>
<!--components/w-popup/w-popup.wxml--> <view class="w-popup-wrapper" wx:if="{{showComputed}}" > <page-container custom-style="background-color: rgba(0, 0, 0, 0);" show="{{visable}}" overlay="{{false}}" z-index="{{zIndex}}" close-on-slide-down="{{false}}" bind:clickoverlay="closeOnMask" bind:beforeenter="beforeEnter" bind:afterleave="afterLeave" bind:beforeleave="beforeleave" > <view class="w-popup {{ show ? 'w-popup-show' : 'w-popup-close'}}"> <view class="w-popup-content"> <view class="w-popup-content-bottom-nav" wx:if="{{position === 'bottom' && showBottomNav }}" > <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-left" bind:tap="close" > 取消 </view> <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-right" bind:tap="confirm" > 确定 </view> </view> <view class="w-popup-content-bottom-slot"> <slot/> </view> </view> </view> </page-container> <view bind:tap="closeOnMask" style="z-index: {{zIndex - 1}};" class="w-popup-overlay {{visable ? 'w-popup-overlay-show' : 'w-popup-overlay-close'}}" /> </view>
代码片段
<!--components/w-popup/w-popup.wxml--> <view class="w-popup-wrapper" wx:if="{{showComputed}}" > <page-container custom-style="background-color: rgba(0, 0, 0, 0);" show="{{visable}}" overlay="{{false}}" z-index="{{zIndex}}" close-on-slide-down="{{false}}" bind:clickoverlay="closeOnMask" bind:beforeenter="beforeEnter" bind:afterleave="afterLeave" bind:beforeleave="beforeleave" > <view class="w-popup {{ show ? 'w-popup-show' : 'w-popup-close'}}"> <view class="w-popup-content"> <view class="w-popup-content-bottom-nav" wx:if="{{position === 'bottom' && showBottomNav }}" > <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-left" bind:tap="close" > 取消 </view> <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-right" bind:tap="confirm" > 确定 </view> </view> <view class="w-popup-content-bottom-slot"> <slot/> </view> </view> </view> </page-container> <view bind:tap="closeOnMask" style="z-index: {{zIndex - 1}};" class="w-popup-overlay {{visable ? 'w-popup-overlay-show' : 'w-popup-overlay-close'}}" /> </view> import { ComponentWithComputed } from 'miniprogram-computed' // components/w-popup/w-popup.ts ComponentWithComputed({ /** * 组件的属性列表 */ properties: { show: { type: Boolean, value: false }, position: { type: String, value: 'bottom' }, closeOnClickMask: { type: Boolean, value: true }, showBottomNav: { type: Boolean, value: true }, zIndex: { type: Number, value: 500 } }, computed: { showComputed(data) { return data.visable || data.closing } }, watch: { show() { const closing = !this.data.show const data = Object.assign({}, { visable: this.data.show }, !this.data.show ? { closing } : {}) this.setData(data) } }, /** * 组件的初始数据 */ data: { visable: false, closing: false }, /** * 组件的方法列表 */ methods: { async close() { this.beforeleave() }, confirm() { this.triggerEvent('confirm') }, closeOnMask() { this.triggerEvent('clickOverlay') if (this.data.closeOnClickMask) this.close() }, beforeEnter() { this.triggerEvent('beforeEnter') }, afterLeave() { this.setData({ closing: false }) this.triggerEvent('closed', false) this.triggerEvent('afterLeave') }, beforeleave() { if (this.data.visable) { this.triggerEvent('close', false) this.triggerEvent('beforeleave', false) } } } }) /* components/w-popup/w-popup.wxss */ .w-popup { position: relative; @keyframes identifier { 0% { opacity: 0; } 100% { opacity: 1; } } z-index: 10; &-overlay { position: fixed; width: 100vw; height: 100vh; background: rgba(0,0,0, 0.7); transition: all 300ms; animation: identifier 300ms forwards; &-close { opacity: 0; } } &-content { width: 100%; background: var(--background); transition: all 300ms; border-radius: 28rpx 28rpx 0 0; overflow: hidden; .hover { opacity: var(--active-opacity); } &-bottom { &-nav { display: flex; justify-content: space-between; padding: 56rpx 34rpx; & > view { &:active { opacity: var(--active-opacity); } } &-left { color: var(--text-color-lighter); } &-right { color: var(--primary); } } &-slot { height: fit-content; } } } }
真是奇技淫巧。。
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
把 page-container 铺满整个页面，自己做遮罩层
<!-- wxml --><page-container show="{{true}}"><view class="detail-mask" catchtouchmove="stopTouchMove"></view><view class="detail-page" catchtouchmove="stopTouchMove"><!-- 你的代码 --></view></page-container>/* wxss */.detail-mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;}.detail-page {position: relative;min-height: 300px;}// jsstopTouchMove() {}, // 阻止穿透蒙层<!--components/w-popup/w-popup.wxml--> <view class="w-popup-wrapper" wx:if="{{showComputed}}" > <page-container custom-style="background-color: rgba(0, 0, 0, 0);" show="{{visable}}" overlay="{{false}}" z-index="{{zIndex}}" close-on-slide-down="{{false}}" bind:clickoverlay="closeOnMask" bind:beforeenter="beforeEnter" bind:afterleave="afterLeave" bind:beforeleave="beforeleave" > <view class="w-popup {{ show ? 'w-popup-show' : 'w-popup-close'}}"> <view class="w-popup-content"> <view class="w-popup-content-bottom-nav" wx:if="{{position === 'bottom' && showBottomNav }}" > <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-left" bind:tap="close" > 取消 </view> <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-right" bind:tap="confirm" > 确定 </view> </view> <view class="w-popup-content-bottom-slot"> <slot/> </view> </view> </view> </page-container> <view bind:tap="closeOnMask" style="z-index: {{zIndex - 1}};" class="w-popup-overlay {{visable ? 'w-popup-overlay-show' : 'w-popup-overlay-close'}}" /> </view> <!--components/w-popup/w-popup.wxml--> <view class="w-popup-wrapper" wx:if="{{showComputed}}" > <page-container custom-style="background-color: rgba(0, 0, 0, 0);" show="{{visable}}" overlay="{{false}}" z-index="{{zIndex}}" close-on-slide-down="{{false}}" bind:clickoverlay="closeOnMask" bind:beforeenter="beforeEnter" bind:afterleave="afterLeave" bind:beforeleave="beforeleave" > <view class="w-popup {{ show ? 'w-popup-show' : 'w-popup-close'}}"> <view class="w-popup-content"> <view class="w-popup-content-bottom-nav" wx:if="{{position === 'bottom' && showBottomNav }}" > <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-left" bind:tap="close" > 取消 </view> <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-right" bind:tap="confirm" > 确定 </view> </view> <view class="w-popup-content-bottom-slot"> <slot/> </view> </view> </view> </page-container> <view bind:tap="closeOnMask" style="z-index: {{zIndex - 1}};" class="w-popup-overlay {{visable ? 'w-popup-overlay-show' : 'w-popup-overlay-close'}}" /> </view>代码片段
<!--components/w-popup/w-popup.wxml--> <view class="w-popup-wrapper" wx:if="{{showComputed}}" > <page-container custom-style="background-color: rgba(0, 0, 0, 0);" show="{{visable}}" overlay="{{false}}" z-index="{{zIndex}}" close-on-slide-down="{{false}}" bind:clickoverlay="closeOnMask" bind:beforeenter="beforeEnter" bind:afterleave="afterLeave" bind:beforeleave="beforeleave" > <view class="w-popup {{ show ? 'w-popup-show' : 'w-popup-close'}}"> <view class="w-popup-content"> <view class="w-popup-content-bottom-nav" wx:if="{{position === 'bottom' && showBottomNav }}" > <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-left" bind:tap="close" > 取消 </view> <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-right" bind:tap="confirm" > 确定 </view> </view> <view class="w-popup-content-bottom-slot"> <slot/> </view> </view> </view> </page-container> <view bind:tap="closeOnMask" style="z-index: {{zIndex - 1}};" class="w-popup-overlay {{visable ? 'w-popup-overlay-show' : 'w-popup-overlay-close'}}" /> </view><!--components/w-popup/w-popup.wxml--> <view class="w-popup-wrapper" wx:if="{{showComputed}}" > <page-container custom-style="background-color: rgba(0, 0, 0, 0);" show="{{visable}}" overlay="{{false}}" z-index="{{zIndex}}" close-on-slide-down="{{false}}" bind:clickoverlay="closeOnMask" bind:beforeenter="beforeEnter" bind:afterleave="afterLeave" bind:beforeleave="beforeleave" > <view class="w-popup {{ show ? 'w-popup-show' : 'w-popup-close'}}"> <view class="w-popup-content"> <view class="w-popup-content-bottom-nav" wx:if="{{position === 'bottom' && showBottomNav }}" > <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-left" bind:tap="close" > 取消 </view> <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-right" bind:tap="confirm" > 确定 </view> </view> <view class="w-popup-content-bottom-slot"> <slot/> </view> </view> </view> </page-container> <view bind:tap="closeOnMask" style="z-index: {{zIndex - 1}};" class="w-popup-overlay {{visable ? 'w-popup-overlay-show' : 'w-popup-overlay-close'}}" /> </view> import { ComponentWithComputed } from 'miniprogram-computed' // components/w-popup/w-popup.ts ComponentWithComputed({ /** * 组件的属性列表 */ properties: { show: { type: Boolean, value: false }, position: { type: String, value: 'bottom' }, closeOnClickMask: { type: Boolean, value: true }, showBottomNav: { type: Boolean, value: true }, zIndex: { type: Number, value: 500 } }, computed: { showComputed(data) { return data.visable || data.closing } }, watch: { show() { const closing = !this.data.show const data = Object.assign({}, { visable: this.data.show }, !this.data.show ? { closing } : {}) this.setData(data) } }, /** * 组件的初始数据 */ data: { visable: false, closing: false }, /** * 组件的方法列表 */ methods: { async close() { this.beforeleave() }, confirm() { this.triggerEvent('confirm') }, closeOnMask() { this.triggerEvent('clickOverlay') if (this.data.closeOnClickMask) this.close() }, beforeEnter() { this.triggerEvent('beforeEnter') }, afterLeave() { this.setData({ closing: false }) this.triggerEvent('closed', false) this.triggerEvent('afterLeave') }, beforeleave() { if (this.data.visable) { this.triggerEvent('close', false) this.triggerEvent('beforeleave', false) } } } }) /* components/w-popup/w-popup.wxss */ .w-popup { position: relative; @keyframes identifier { 0% { opacity: 0; } 100% { opacity: 1; } } z-index: 10; &-overlay { position: fixed; width: 100vw; height: 100vh; background: rgba(0,0,0, 0.7); transition: all 300ms; animation: identifier 300ms forwards; &-close { opacity: 0; } } &-content { width: 100%; background: var(--background); transition: all 300ms; border-radius: 28rpx 28rpx 0 0; overflow: hidden; .hover { opacity: var(--active-opacity); } &-bottom { &-nav { display: flex; justify-content: space-between; padding: 56rpx 34rpx; & > view { &:active { opacity: var(--active-opacity); } } &-left { color: var(--text-color-lighter); } &-right { color: var(--primary); } } &-slot { height: fit-content; } } } }<!--components/w-popup/w-popup.wxml--> <view class="w-popup-wrapper" wx:if="{{showComputed}}" > <page-container custom-style="background-color: rgba(0, 0, 0, 0);" show="{{visable}}" overlay="{{false}}" z-index="{{zIndex}}" close-on-slide-down="{{false}}" bind:clickoverlay="closeOnMask" bind:beforeenter="beforeEnter" bind:afterleave="afterLeave" bind:beforeleave="beforeleave" > <view class="w-popup {{ show ? 'w-popup-show' : 'w-popup-close'}}"> <view class="w-popup-content"> <view class="w-popup-content-bottom-nav" wx:if="{{position === 'bottom' && showBottomNav }}" > <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-left" bind:tap="close" > 取消 </view> <view hover-class="hover" hover-start-time="{{20}}" hover-stay-time="{{100}}" class="w-popup-content-bottom-nav-right" bind:tap="confirm" > 确定 </view> </view> <view class="w-popup-content-bottom-slot"> <slot/> </view> </view> </view> </page-container> <view bind:tap="closeOnMask" style="z-index: {{zIndex - 1}};" class="w-popup-overlay {{visable ? 'w-popup-overlay-show' : 'w-popup-overlay-close'}}" /> </view> import { ComponentWithComputed } from 'miniprogram-computed' // components/w-popup/w-popup.ts ComponentWithComputed({ /** * 组件的属性列表 */ properties: { show: { type: Boolean, value: false }, position: { type: String, value: 'bottom' }, closeOnClickMask: { type: Boolean, value: true }, showBottomNav: { type: Boolean, value: true }, zIndex: { type: Number, value: 500 } }, computed: { showComputed(data) { return data.visable || data.closing } }, watch: { show() { const closing = !this.data.show const data = Object.assign({}, { visable: this.data.show }, !this.data.show ? { closing } : {}) this.setData(data) } }, /** * 组件的初始数据 */ data: { visable: false, closing: false }, /** * 组件的方法列表 */ methods: { async close() { this.beforeleave() }, confirm() { this.triggerEvent('confirm') }, closeOnMask() { this.triggerEvent('clickOverlay') if (this.data.closeOnClickMask) this.close() }, beforeEnter() { this.triggerEvent('beforeEnter') }, afterLeave() { this.setData({ closing: false }) this.triggerEvent('closed', false) this.triggerEvent('afterLeave') }, beforeleave() { if (this.data.visable) { this.triggerEvent('close', false) this.triggerEvent('beforeleave', false) } } } }) /* components/w-popup/w-popup.wxss */ .w-popup { position: relative; @keyframes identifier { 0% { opacity: 0; } 100% { opacity: 1; } } z-index: 10; &-overlay { position: fixed; width: 100vw; height: 100vh; background: rgba(0,0,0, 0.7); transition: all 300ms; animation: identifier 300ms forwards; &-close { opacity: 0; } } &-content { width: 100%; background: var(--background); transition: all 300ms; border-radius: 28rpx 28rpx 0 0; overflow: hidden; .hover { opacity: var(--active-opacity); } &-bottom { &-nav { display: flex; justify-content: space-between; padding: 56rpx 34rpx; & > view { &:active { opacity: var(--active-opacity); } } &-left { color: var(--text-color-lighter); } &-right { color: var(--primary); } } &-slot { height: fit-content; } } } }真是奇技淫巧。。