本文已参与「新人创作礼」活动.一起开启掘金创作之路。
上一篇文章我们已经完成了选词填空的倒计时以及标题的内容，接下来这篇文章将会把选词填空的整体页面写出来。
- 单词选择框
首先我们需要的是一个这样的单词选择框：
这里我用到了uni-app官方出的一个组件----uni-grid,链接：uniapp.dcloud.net.cn/component/u…
使用了组件之后，我们需要将:column的值改为5，即表示为有5行，：showBorder的属性值改为false，即表示为每个宫格没有边框，但是我们需要在整个组件外面包裹一个view元素，将其加上border边框，然后在uni-grid里面写一个view容器来循环遍历我们的单词数据，v-for="item in wordlist" :key="index",然后再在里面写上uni-grid-item,每一个宫格元素，内容即为{{item.name}},这样我们就可以将我们的单词渲染到页面上了，但是我们还没有单词数据，这里因为我没有后端接口，就在data中return了一个wordlist,数据样式如下：
这样我们的单词选择框就完成了，还有些css样式可以自行修改。
- 文章以及答案填写框
文章以及答案填写框的样子如下图：
这里我使用了scroll-view，将这两部分按照7比3的比例进行滚动布局，这是文章内容的scroll-view,css样式也在标签内容里面
这是答案填写框的scroll-view:
这里文章内容的flex占7，答案填写框的flex占3，这样就可以实现两边的内容分别滚动不相互影响了。
完成之后的具体样子如下图：
