本文已参与「新人创作礼」活动.一起开启掘金创作之路。
上一篇文章我们完成了阅读理解页面，接下来还有一个段落匹配的页面，接下来要完成段落匹配页面以及“我的”页面
- 首先，段落匹配也是和阅读理解差不多，前面是一大段文章，下面一个button按钮，点击后可以显示题目，然后里面时左右滚动的swiper组件，最后一个是查看答案。大致展示效果如下图：
当用户不想看题目想看文章的时候，可以点击左上角的叉号关闭这个弹出层组件，不影响做题 2. 在这个页面的上面同样是页面的标题以及做题的倒计时建议用时，展示效果如下图：
这个倒计时组件具体链接：uniapp.dcloud.net.cn/component/u… 然后在倒计时前面搭配一个沙漏的小图标，沙漏图标的代码：<u-icon name="hourglass-half-fill" color="#1a73e8" size="25px"></u-icon>
然后让这两个view容器进行flex布局，让他们在同一行展示
-
查看题目以及答案部分我是使用了swiper，并且将他进行滚动，指示器小点显示为true
<scroll-view scroll-y="true" style="height: 150rpx;">，然后再在data中return一些自定义数据，通过v-for循环渲染这些数据到我们的弹出层的内容里面去。 -
轮播到最后一个的时候，是查看答案的部分，这里使用到了uni-collapse-item组件，点击后会显示折叠的内容，具体的组件链接：uniapp.dcloud.net.cn/component/u… ，
-
查看答案的轮播页面代码如下：
<uni-collapse-item :show-animation="true" title="点我查看答案">
<text>1~5 ： H D K B G</text>
<br>
<text>6~10 ：I E C H F</text>
</uni-collapse-item>
这样，我们的段落匹配页面就完成了。
