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 相关文章推荐
javascript第一课
Feb 27 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
JS中判断null的方法分析
Nov 21 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
vue通过过滤器实现数据格式化
Jul 20 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 和 MySQL 基础教程(一)
2006/10/09 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
jQuery 选择器理解
2010/03/16 Javascript
js中eval详解
2012/03/30 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
微信小程序多张图片上传功能
2017/06/07 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
python框架django基础指南
2016/09/08 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Python实现FLV视频拼接功能
2020/01/21 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
消防安全检查制度
2014/02/04 职场文书
企业管理标语
2014/06/10 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
团代会邀请函
2015/02/02 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server