菜鸟读文档-Vant Weapp-10(点击弹出输入框实践-1)

正文

在微信小程序开发中, 点击按钮后弹出输入框(如下图所示)是一个相当常见的结构, 从本期开始我们将一起探究如何利用 Vant Weapp 来将其实现

这一结构大致可以分为三部分

按钮
遮罩层
输入框

接下来我们依次来学习各个部分的使用

按钮

首先我们来确认一下我们要实现的 button 需求

固定于页面右下方
圆形
内部包含符号加号

接下来我们来查看 Vant Weapp 中的 button 组件, 来确定实现各个需求的方式

固定于页面右下方

该需求属于一个定位需求, 因此我们需要对 button 组件的样式进行控制

虽然 button 组件开放了 custom-style 接口, 但为了代码的简洁性, 我们选择使用外部样式类 custom-class

由于是要将按钮固定在页面的一个位置, 所以我们使用到了固定定位 fixed, 接下来控制具体位置时需要注意与下方 tabbar 和屏幕右侧保持一定距离
```
.add-todo-btn {
  /* 定位需求 */
  position: fixed !important;
  right: 2vw !important;
  bottom: 12vh !important;
}
```
圆形

我们的需求中按钮的形状为圆形, 而button 组件开放了圆形按钮接口 round, 因此我们将其打开就行了

但在实机演示上, 按钮呈现出的效果并不是一个完全规整的圆形, 而是一个接近圆形的椭圆

通过查看按钮的样式可以得出: 该按钮样式中的 border-radius 属性使用的是单值, 即使用同一大小的圆形去贴合边框的四角, 但其 width 和 height 属性却不相等, 因此需要对涉及相关属性进行设置
```
.add-todo-btn {
  /* 定位需求 */
  position: fixed !important;
  right: 2vw !important;
  bottom: 12vh !important;
  /* 圆形需求 */
  width: 100rpx !important;
  height: 100rpx !important;
}
```
内部包含符号加号

我们的需求中要在按钮内部添加一个加号, 而查看文档发现 button 组件开放了 icon 接口, 我们将其设置为加号 icon="plus" 图标即可

但是在测试中却发现该内部图标的大小是固定的, 这显然不符合我们弹性布局的需求

在查看该接口对应的内部的样式后发现, 该图标的大小是由 font-size 属性控制的, 因此还需要在样式中添加属性控制内部符号大小的弹性
- WXSS
```
.add-todo-btn {
  /* 定位需求 */
  position: fixed !important;
  right: 2vw !important;
  bottom: 12vh !important;
  /* 圆形需求 */
  width: 100rpx !important;
  height: 100rpx !important;
  /* 内部图标弹性 */
  font-size: 40rpx !important;
}
```
- WXML
```
<van-button
  custom-class="add-todo-btn"
  type="primary"
  color="#9DE7FF"
  icon="plus"
  round
/>
```
自此, 我们实现了目标结构的按钮部分

遮罩层

接下来是遮罩层部分, 该部分的需求为:

点击按钮出现遮罩层
点击黑色部分遮罩层消失

接下来我们来查看 Vant Weapp 中的 overlay 组件, 确定各个需求的实现方式

其实该两个需求的核心都是对 overlay 组件中 show 接口的控制, 只不过是需求 1 是通过 button 组件中的 bind:click 事件实现, 而需求 2 是通过 overlay 组件中的 bind:click 事件实现

WXML

<van-button
  custom-class="add-todo-btn"
  type="primary"
  color="#9DE7FF"
  icon="plus"
  round
  bind:click="onClickShow"
/>

<van-overlay
  show="{{ showOverlay }}"
  bind:click="onClickHide"
>

JavaScript

onClickShow: function () {
  this.setData({
    showOverlay: !this.data.showOverlay,
  });
},

onClickHide: function () {
  this.setData({
    showOverlay: !this.data.showOverlay,
  });
},

自此, 我们实现了目标结构的遮罩层部分

问题

但是这里存在一个问题, 那就是下方 tabbar 始终会位于遮罩层的上方, 即使为 overlay 组件设置了 z-index 属性也无法改变, 但由于目标结构中在点击按钮后, 弹出的输入栏会将下方的 tabbar 盖住, 所以该问题暂时不需要处理

预告

输入框实践

在本期, 我们实现了目标结构三大组成中的两部分: 按钮和遮罩层. 相对而言, 整个过程是较为轻松的. 在下一期, 我们将专注于实现目标结构的最后一部分: 输入框:)