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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
利用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中实现进程间通讯
2006/10/09 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
react-native之ART绘图方法详解
2017/08/08 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
简单了解Python write writelines区别
2020/02/27 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python 实现逻辑回归
2020/12/30 Python
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
寄语学生的话
2014/04/10 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
实习科室评语
2015/01/04 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
golang语言指针操作
2022/04/14 Golang