uniapp项目答题的上一题以及vuex的使用

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

上一篇文章中我们实现了答对题目自动切换为下一题，接下来我们将完成返回上一题以及答对增加其他页面的积分

• 首先我们在本轮答题结束之后会出现模态框，如下所示：

• 我们给取消绑定一个事件就是关闭模态框，给确认一个事件就是关闭模态框并且返回上一级，两个事件的代码如下所示：

cancel() {
      this.show = false;
    },
confirm() {
      this.show = false;
      uni.navigateBack(-1)
    },

这里的navigateBack（-1）就是返回上一级的作用

• 然后我们给这个页面下面一个button按钮用来切换为上一题，按钮的代码如下所示：

 <u-button
      type="primary"
      text="上一题"
      @click="upSubject"
      :disabled="disabled"
      color="#34e2a3"
    ></u-button>

这个按钮需要绑定一个切换上一题的事件方法以及动态绑定一个disabled，当题目为第一题的时候按钮被禁用，当题目不是第一题的时候按钮可以点击并返回上一题，颜色也改为我们的主题色青色。

• 这个按钮的upSubject事件方法作用内容就是让题目序号减一，进度条进度减10，按钮的禁用随当前题目的数量变化，当题目序号为1或者为10的时候这个disabled为true,具体的功能实现代码如下所示：

 upSubject() {
      this.num -= 1;
      this.count -= 10;
      this.ban = false;
      if (this.num == 1 && this.count == 10) {
        this.disabled = true;
      }
    },

• 这里我们设置的是答对一题我们主页的积分就会加5，这个积分是一个全局可以改变的状态量，所以使用vuex是最好 的控制方法。