swiper动态渲染视图，解决答题问题

最新推荐文章于 2025-02-06 22:01:14 发布

原创

最新推荐文章于 2025-02-06 22:01:14 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app #vue.js #javascript

文章讲述了在使用Vue和Swiper组件开发项目时，遇到限制不能跳过未回答题目。作者通过创建计算属性和动态渲染题目，实现了根据用户答案过滤并跳过第一道题的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目碰到这样一个需求，当当前题目没答的时候，不能进入下一题，而我用的组件是swiper，swiper没有类似阻止滑动的属性，于是只能自己想了.......问题的解决思路就是动态渲染题目，并且过滤掉第一道题，当第一道题答完才渲染第二道题，以此类推，直至渲染全部题目，我们可以采用vue的计算属性，动态渲染题目

  computed: {
    answeredSubject() {
      // 根据答案列表过滤出已答题目，从第二道题开始，跳过第一道题
      return this.subject.filter((item, index) => index === 0 || !!this.answerlist[index - 1]);
    },
  },

完整代码如下

<template>
  <view class="content">
    <!--    swiper整屏滑动-->
    <swiper :vertical="true" class="swiper" :current="activeIndex" @change="swiperChange">
      <swiper-item class="swiper-item" v-for="(item,index) in answeredSubject"    :key="index">
        <view style="padding: 32rpx">
          <view class="title">{
  
  { item.title }}</view>
          <view class="option A" :class=" answer