vue+swiper实现左右滑动的测试题功能


Posted in Javascript onOctober 30, 2020

最近在做一个测试题,前后可以切换题目,点击按钮选择答案,选择答案的同时改变按钮的背景色,如下图所示:

vue+swiper实现左右滑动的测试题功能

初始代码

我用了vue和swiper。所有的题目是一个对象数组,通过v-for渲染:

<swiper ref="mySwiper" :options="swiperOptions">
 <swiper-slide v-for="(item, index) in listData" :key="index">
  <div class="question-box">
   <div class="idx">- 第{{ index+1 }}题 -</div>
   <div class="question">{{ item.question }}</div>
  </div>
  <button @click="goNext(index, 'a')" :class="item.answer=='a' ? 'active': ''">是</button>
  <button @click="goNext(index, 'b')" :class="item.answer=='b' ? 'active': ''">否</button>
 </swiper-slide>
</swiper>

一开始我把每道题目的answer存放在对象里面,点击的按钮时候切换answer的值,button的动态class监听到值改变后会引发背景色的改变。js部分:

goNext(index, answer) {
 this.$set(this.listData[index], 'answer', answer)
 this.swiper.slideNext(100)
},

发现问题

测试发现这样把点击事件和动态样式互相依赖,会造成大概几百毫秒的延迟才执行slideNext(),是可以直观感受到的延迟。通过调试,发现造成延迟有两方面的原因:

  • this.$set 更改数组
  • 执行完点击事件动态class监听到数据的改变 中间也有延迟。

于是我换了一个思路,不把每个题目的answer放在对像数组里面,而是在data里面定义一个answerMap,这样解决了问题1。为了解决问题2,我选择把动态样式 :class 去掉,改成用原生js在点击事件里面直接修改class。这样两步下来,确实看不到延迟了。

优化后的代码

html部分

<button @click="goNext($event, index, 'a')">是</button>
<button @click="goNext($event, index, 'b')">否</button>

js部分

goNext(e, index, answer) {
 const element = e.target
 const bro = element.parentNode.children
 for (let i = 0; i < bro.length; i++) {
  if (bro[i] !== element) {
   bro[i].classList.remove("active")
  }
 }
 element.classList.add('active')
 this.answerMap[this.listData[index].question] = answer
 this.swiper.slideNext(100)
},

测试结果:可喜可贺,slideNext()不再有肉眼可见的延迟了。

有的时候为了少写点代码,不知不觉牺牲了性能。这次实践,虽然原生JS使我增加了好几行代码,但是带来的性能提升也是非常明显的。经过这次优化,我觉得如果对Vue源码理解透彻的人,大概是能马上知道优化点。我虽然看过一遍源码,但还是理解不够深入。需要学习的还有很多呀~

到此这篇关于vue+swiper实现左右滑动的测试题功能的文章就介绍到这了,更多相关vue左右滑动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
JavaScript 事件系统
Jul 22 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
利用vue3+ts实现管理后台(增删改查)
Oct 30 #Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 #Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 #Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 #Javascript
JavaScript实现轮播图效果
Oct 30 #Javascript
vue组件添加事件@click.native操作
Oct 30 #Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 #Javascript
You might like
PHP-redis中文文档介绍
2013/02/07 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
js汉字转拼音实现代码
2013/02/06 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
详解js的六大数据类型
2016/12/27 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python中的多重装饰器
2015/04/11 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
python实现一个猜拳游戏
2020/04/05 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
2014年安全生产大检查方案
2014/05/13 职场文书
毕业实习单位意见
2015/06/04 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL