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表单验证代码(包括例子)
Nov 11 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
php取出数组单个值的方法
2018/03/12 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
javascript基本语法
2016/05/31 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
解读! Python在人工智能中的作用
2017/11/14 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python GUI编程完整示例
2019/04/04 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
通过自学python能找到工作吗
2020/06/21 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
5.1手机促销活动
2014/01/17 职场文书
三爱活动实施方案
2014/03/19 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
郭明义电影观后感
2015/06/08 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android