小程序控制半屏弹框显示与隐藏

可以通过以下步骤实现：

1. 在小程序的页面中添加一个半屏弹框的容器元素，例如：

<view class="modal">
  <!-- 弹框内容 -->
</view>

2. 给弹框容器元素设置样式，将其放置在页面底部并且只显示一半：

.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #fff;
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

其中，`transform: translateY(100%)` 将弹框元素向下平移了整个窗口高度，让其隐藏在屏幕之外。`transition: transform 0.3s ease-in-out` 则设置了一个动画，在弹框显示或隐藏时可以产生平滑的过渡效果。

3. 在小程序的逻辑代码中，定义一个变量来控制弹框的显示状态：

Page({
  data: {
    showModal: false // 弹框是否显示
  },
  // ...
})

4. 在页面中添加一个按钮或者其他触发元素，当用户点击时可以显示弹框：

<button bindtap="showModal">显示弹框</button>

5. 在逻辑代码中添加 `showModal` 函数，用于控制弹框的显示：

Page({
  data: {
    showModal: false // 弹框是否显示
  },
  showModal: function () {
    this.setData({
      showModal: true
    })
  }
})

当用户点击按钮时，调用 `showModal` 函数将 `showModal` 变量的值设置为 `true`，弹框就会显示出来了。

6. 最后，在样式中添加如下代码：

.modal.show {
  transform: translateY(0);
}

这段代码会在弹框元素的 `class` 属性中添加一个 `show` 类名，当该类名存在时，弹框会从底部滑动上来，显示在屏幕上半部分。

7. 在逻辑代码中，添加一个 `hideModal` 函数，用于控制弹框的隐藏：

Page({
  data: {
    showModal: false // 弹框是否显示
  },
  showModal: function () {
    this.setData({
      showModal: true
    })
  },
  hideModal: function () {
    this.setData({
      showModal: false
    })
  }
})

8. 在弹框容器元素中，添加一个关闭按钮或其他触发元素，当用户点击时可以隐藏弹框：

<view class="modal">
  <!-- 弹框内容 -->
  <button bindtap="hideModal">关闭弹框</button>
</view>

9. 在逻辑代码中，实现 `hideModal` 函数：

Page({
  data: {
    showModal: false // 弹框是否显示
  },
  showModal: function () {
    this.setData({
      showModal: true
    })
  },
  hideModal: function () {
    this.setData({
      showModal: false
    })
  }
})

当用户点击关闭按钮时，调用 `hideModal` 函数将 `showModal` 变量的值设置为 `false`，弹框就会隐藏起来了。

完成上述步骤后，就可以实现在小程序中控制半屏弹框的显示和隐藏了。