uniapp项目答题页面优化

144 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第23天,点击查看活动详情

Snipaste_2022-09-28_08-38-26.png

上一篇文章中我们完成了判断用户选择的选项是否和我们数据里的选项一致了。接下来我们将完成一些答题页面的优化,比如说页面上面进度条的添加以及倒计时的添加。

  • 这里的进度条我们需要使用到uView组件库中的进度条组件,官网链接:www.uviewui.com/components/… ,我们选择带百分比的这个,把他的源代码复制粘贴到我们题目的上方,然后绑定一个count用来控制用户答题答对了然后进度条往前面前进,然后在把进度条的颜色改为我们的主题色,进度条的具体的实现代码如下所示:
  <u-line-progress
        :percentage="count"
        activeColor="#34e2a3"
      ></u-line-progress>

这里绑定的count我们帮他的初始值赋值为10,在data中return的代码如下图所示:

image.png

但是我们的进度条的样式是下面这样的,我们还需要添加一个用户已经答了多少题

image.png

  • 这里我们定义了一个num,初始值为1当用户答对了之后num就++,当用户没有答对就不变化,然后是当前多少题目/共多少题目,具体的实现代码如下所示:
  <view>当前第{{ num + 1 }}题/10</view>
  • 页面中我们还添加了一个倒计时的沙漏,这个倒计时的组件在uView也有,官方链接:www.uviewui.com/components/… ,我们使用基础用法就行了,把代码复制粘贴到进度条的上面,然后改一下时间就可以出现倒计时的效果了