vue和swiper实现左右滑动试题

时间：2023-03-31 17:55:35 vue.js

最近在做一道试题，可以前后切换题型，点击按钮选择答案，选择的时候改变按钮的背景颜色回答，如下图：初始代码和swiper我用的是vue。所有主题都是对象数组，由v-for呈现：-问题{{index+1}}-

是<按钮@click="goNext(index,'b')":class="item.answer=='b'?'active':''">否在一开始，我把每个问题的答案都存储在对象中，点击按钮时切换答案的值，按钮的动态类会在值改变后导致背景颜色改变。js部分：goNext(index,answer){this.$set(this.listData[index],'answer',answer)this.swiper.slideNext(100)}，问题找到了，测试发现点击事件和动态样式交互的依赖，会导致在执行slideNext()之前有大概几百毫秒的延迟，这是一个直观的延迟。通过调试，发现延迟的原因有两个：this.$set改变数组和执行点击事件之间也有延迟，动态类监听数据变化。于是我换了个思路，不再把每个问题的答案放在对象数组中，而是在数据中定义了一个answerMap，解决了问题1。为了解决问题2，我选择去掉动态样式：class并使用原生js直接修改点击事件中的类。这样走了两步，还真是没有耽误。优化代码html部分是否js部分goNext(e,index,answer){constelement=e.targetconstbro=element.parentNode.childrenfor(leti=0;i