微信小程序爬坑记之屏幕遮罩层选择器实现

前言

手动实现一个简单的屏幕遮罩层单项选择器，使用场景很多，此处用于性别选择。

---

先看一下效果

需求

小程序中有picker组件，可以从底部弹出，一般像图中的性别选择可以用picker来做，但是效果可能就没那么好看，下面来做一个遮罩层，实现一个单项选择器。

分析

首先是样式的实现，就是css基础了，这里用定位实现，其次就是功能的实现，显示隐藏，和类别选择。

实现

先贴代码，再做说明。

wxml

<!-- 性别选择 -->
<view class="gender-box" wx:if="{{ isShow }}">
  <view class="gender">
    <view class="man bd-b row-center algin-center" bind:tap="handleChooseMan" data-gender="MAN">
      <text >男</text>
    </view>
    <view class="woman row-center algin-center" bind:tap="handleChooseWoman" data-gender="WOMAN">
      <text >女</text>
    </view>
  </view>

  <view class="cancle row-center algin-center" bind:tap="handleCancle">
    <text >取消</text>
  </view>
</view>

wxss

.gender-box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .4);
  overflow: hidden;
  z-index: 999;

  
  .gender {
    width: 94.67%;
    margin: auto;
    height: rpx(202);
    border-radius: rpx(22);
    background-color: #fff;
    margin-top: 115%;

    .man,
    .woman {
      height: 50%;
      color: #3763E5;
      font-size: rpx(36);
    }

  }

  .cancle {
    width: 94.67%;
    margin: auto;
    height: rpx(100);
    color: #3763E5;
    font-size: rpx(36);
    border-radius: rpx(22);
    background-color: #fff;
    margin-top: 2.5%;
  }
}

js

// 选择性别
handleChooseGender: () => {
  page.setData({
    isShow: true
  });
},

// 男
handleChooseMan: ({currentTarget}) => {
  page.setData({
    isShow: false,
    'information.gender': currentTarget.dataset.gender
  });
},

// 女
handleChooseWoman: ({currentTarget}) => {
  page.setData({
    isShow: false,
    'information.gender': currentTarget.dataset.gender
  });
},

// 点击取消
handleCancle: () => {
  page.setData({
    isShow: false
  });
},

这里用 wx:if 控制显示隐藏，data-xxx 是自定义属性，可以通过事件 e.currentTarget.dataset.xxx 来拿到值。定义对应的点击事件。

总结

主要是css实现，屏幕遮罩层使用场景有很多，也很常见，这次在微信小程序中用到，在此记录一下，个人认为比原生组件picker要好看一点。