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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
jQuery each()小议
Mar 18 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 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执行速度全攻略
2006/10/09 PHP
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
JS实现星星海特效
2019/12/24 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
人机交互程序 python实现人机对话
2017/11/14 Python
python批量下载抖音视频
2019/06/17 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
Python如何使用字符打印照片
2020/01/03 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
武汉瑞得软件笔试题
2015/10/27 面试题
结婚保证书(卖身契)
2015/02/26 职场文书
雨中的树观后感
2015/06/03 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书