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 相关文章推荐
js 字符串转换成数字的三种方法
Mar 23 Javascript
script标签属性用type还是language
Jan 21 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python函数的5种参数详解
2017/02/24 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python模块导入的方法
2019/10/24 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
PHP如何自定义函数
2016/09/16 面试题
后勤部长岗位职责
2013/12/14 职场文书
《灯光》教学反思
2014/02/08 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
教师先进个人材料
2014/12/17 职场文书
终止劳动合同通知书
2015/04/16 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
致运动员赞词
2015/07/22 职场文书