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

相应跳转页面的编写

1. 上一篇文章中我们实现了九宫格的相应页面跳转，接下来我们将会实现跳转到页面的具体内容的编写。这里我们会使用到uni-app官方出的组件，首先我们进入到uni-app的官网，点击组件，点击扩展组件，找到uni-list列表组件，然后根据具体用法复制粘贴即可，官网地址：uniapp.dcloud.net.cn/component/u…

2. 我们将基础用法复制粘贴到我们的页面中，然后再具体编写，让他跳转到详情页面，具体的代码如下：

<uni-list>
     <uni-list-item title="选词填空练习一" link to="/pages/vue/index/index" @tap="toDetail">
     </uni-list-item>
     <uni-list-item title="选词填空练习二" link to="/pages/vue/index/index" @tap="toDetail">
     </uni-list-item>
     <uni-list-item title="选词填空练习三" link to="/pages/vue/index/index" @tap="toDetail">
     </uni-list-item>
   </uni-list>

我们每一个uni-list-item都绑定了一个跳转方法，@tap="toDetail"，然后再在script中配置这个跳转方法

methods: {
    toDetail(){
      uni.navigateTo({
        url:'./xctk1/xctk1'
      })
    }

然后我们需要在这个文件中再创建一个新文件夹，里面再创建多个相应的页面，用来跳转到这些页面中，因为我做的是四级题库，所以我里面的内容都是有关四级题目的。

题目的编写

• 跳转完成之后我们就需要将页面的内容完成，题目我是随便扒的，然后将其复制粘贴上去的，首先我们看选词填空这个页面的功能实现，我们在使用做题的app的时候经常会看到倒计时的功能，我们uni-app中也有这个组件，具体的链接如：uniapp.dcloud.net.cn/component/u…

之后我们再来完善选词填空这个页面。