wkiwi的博客

小程序遮罩层开发技巧

发布时间:6年前热度: 4526 ℃评论数:

来深圳入职新公司的第一天,在熟悉公司项目代码时发现了一些问题,

代码略显臃肿,没有太多的组件化,其中一个功能中为了让遮罩层全屏遮罩,放弃了官方的tabbar,将底部三个tab页面,写在了一个home页中,导致该页面非常庞大,维护数据特别大,同时导致自己熟悉代码进度缓慢,就遮罩层这块,之前自己有在项目中使用,有几个技巧。

以下方案为折中方案,缺点是在显示遮罩时看不到遮罩下边的tabbar,具体需求具体解决吧!


1.在显示遮罩的同时先关闭底部tab栏,在隐藏遮罩的同时先显示tab栏

js部分

showMask: function(){
    let _this =this
    wx.hideTabBar({
      success(){
        _this.setData({
          showMaskType: true
        })
      }
    })
  },
  hideMask: function () {
    let _this = this
    wx.showTabBar({
      success() {
        _this.setData({
          showMaskType: false
        })
      }
    })
  },

html部分

<view class="show-mask" bindtap="showMask">显示遮罩</view>

<view class="mask" wx:if="{{showMaskType}}" bindtap="hideMask" ></view>

css部分

.mask{
  position: fixed;
  z-index:999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  height:100%;
  width: 100%;
  background: rgba(8, 18, 28, 0.3)
}


2.在遮罩层完成后会发现,如果页面本身高度大于100Vh(屏幕高度)会出现页面级滚动事件,此时尽管遮罩层在上,但是可以透过遮罩层看到下边内容滚动,解决方案有两种:


1.在遮罩层上用catchtouchmove事件(capture-catch:touchmove)拦截页面级的滚动事件

html

<view class="mask" wx:if="{{showMaskType}}" bindtap="hideMask" catchtouchmove="preventTouchMove"></view>

<view class="mask" wx:if="{{showMaskType}}" bindtap="hideMask" capture-catch:touchmove="preventTouchMove"></view>

js

preventTouchMove: function () {
    console.log('stop user scroll it!');
    return;
}


2.在显示遮罩层的时候让页面高度强制显示为100vh


html

<view class="page" class="{{showMaskType?'pageTo100':''}}">

<view class="show-mask" bindtap="showMask">显示遮罩</view>

<view class="mask" wx:if="{{showMaskType}}" bindtap="hideMask" ></view>

</view>

.pageTo100{
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  z-index: 0;
}


3.遮罩层为弹窗父元素,防止子元素点击冒泡到父元素上


    也许你此时回发现在上边我的mask遮罩层与弹窗是分开的,并没有使用mask去包含弹窗,是因为在点击弹窗上按钮时触发事件会冒泡到父元素上,其实这里也有技巧


<view class="mask" bindtap="hideMask">

<view class="toast" catchtap="click" >

</view>

</view>


在mask子元素上没有使用bindtap  而是使用了catchtap,这是小程序提供的防止冒泡事件的点击事件
此时你会发现点击弹窗按钮事件并不会冒泡到父元素mask上了

微信小程序,开发技巧,遮罩层,tab

手机扫码访问