uni-app开发初体验（day7）

本文已参与「新人创作礼」活动.一起开启掘金创作之路。

上一篇文章我们已经将选词填空的基本内容完成了，这个页面我们还差一个抽屉组件来显示题目的答案。

1. 首先我们需要一个底部的按钮来帮助我们打开抽屉组件，在我们的代码后面加上button按钮，并且为其绑定一个showDrawer事件用来打开抽屉。

<button @click="showDrawer" type='primary'>查看答案及解析</button>

2. 接下来我们将会使用到uni-drawer抽屉组件，链接：uniapp.dcloud.net.cn/component/u…

我们需要设置他的三个属性：ref="showRight" mode="right" :mask-click="true"，表示的意思为在右边弹出，显示遮罩层。

3. 抽屉有了之后我们需要完成里面的答案内容，这里还是使用scrool-view,滚动方式设置为y轴。具体代码如下：

<scroll-view style="height: 100%;" scroll-y="true">
        <view class="cankao">参考答案:</view>
        <view class="big" style="text-align: center;border-bottom: 2px solid #cccccc;">
          <view class="daan">(1) terrible</view>
          <view class="daan">(2) worth</view>

还有一个解析内容，在下面我们再写上题目的解析：

 <view class="jiexi">详情解析:</view>
  <view>
          1. terrible此处应该填入形容词，修
          饰dangers，只有terrible合适， 后文
          说火车旅行的危险同样可怕也印证了
          此空。
  </view>

然后我们还需要再在methods中设置两个方法，分别是打开和关闭抽屉的方法showDrawer以及closeDrawer，具体的代码如下图所示：

这两个事件方法绑定到button以及uni-drawer中，分别表示点击按钮打开抽屉，点击遮罩层关闭抽屉，展示效果如下图：

然后我们点击遮罩层部分，这个抽屉就会关闭，恢复原来的样子，这样可以方便使用者做题目和看题目。