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左右滑动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue框架里使用Swiper的方法示例

    下载swiper 首先使用npm 或者cnpm下载swiper cnpm install swiper 引入swiper import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 使用swiper <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swi

  • Vue实现移动端左右滑动效果的方法

    1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话,一定要下next分支上的. 3. 使用: 3.1 npm install vue-touch@next --save 3.2 在main.js 中 引入: import VueTouch from 'vue-touch

  • vue使用swiper实现左右滑动切换图片

    本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码,供大家参考,具体内容如下 使用npm 安装vue-awesome-swiper npm install vue-awesome-swiper --save 在main.js中引用 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.user(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css' 在组件中使用 <te

  • vue-swiper的使用教程

    swiper是我之前做前端页面会用到的一个插件,我自己认为是非常好用的.swiper提供了形式多种多样.适应各个终端的轮播图效果.本文是小编给大家带来的vue-swiper的使用教程. vue-awesome-swiper官网链接https://www.npmjs.com/package/vue-awesome-swiper 和上一篇随笔一样,我们先下载包,然后去main.js里面配置. npm install vue-awesome-swiper --save 我们可以用import的方法 /

  • vue移动端实现手机左右滑动入场动画

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 app.vue <template> <div id="app"> <transition :name="transitionName"> <keep-alive > <router-view v-if="$route.meta.keepAlive" class="Router">&

  • 基于Vue实现页面切换左右滑动效果

    基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in"> <!--动态获得transition 的name值--> <router-view class="app-view" wechat-title></router-vi

  • vue+swiper实现左右滑动的测试题功能

    最近在做一个测试题,前后可以切换题目,点击按钮选择答案,选择答案的同时改变按钮的背景色,如下图所示: 初始代码 我用了vue和swiper.所有的题目是一个对象数组,通过v-for渲染: <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="(item, index) in listData" :key="index">

  • Vue实现滑动拼图验证码功能

    缘由:之前看哔哩哔哩官网登录的时候有一个拼图验证码,很好奇怎么去实现.然后就想着自己弄一个.先给大家看我的最终效果.后面再一点点拆解代码. 为什么想着写这个功能呢,主要在于拼图验证码在前端这里会比较复杂并且深入.相比文字拼写,12306的图片验证码都没有拼图验证码对前端的要求来的复杂,和难. 我总结下知识点: 1.弹窗功能 2.弹窗基于元素定位 3.元素拖动 4.canvas绘图 5.基础逻辑 一.弹窗和弹窗组件 抱歉,这里我偷懒了直接用了elementUI的el-popover组件,所以小伙伴

  • vue仿淘宝滑动验证码功能(样式模仿)

    vue仿淘宝滑动验证码功能(样式模仿)

    我们知道验证码的目的 是为了验证到底是人还是机器. 淘宝滑动验证码会采集用户的操作数据,环境数据等等,通过算法加密成一个字符串,提交到服务器分析,判断是不是人工在操作. 我这里写的只是模仿了样式,并没有进行那些复杂的操作,所以并不安全(不能判断人还是机器). 因为touch事件和mouse事件不同,和获取clientX在移动端和pc端也不同!!!所以分两端 下面有PC端和移动端!!!(2019-03-12更新) 本文基于vue,引入下面组件 可以直接使用 1.实际效果 2.PC端!!! vue组

  • vue+swiper实现侧滑菜单效果

    vue+swiper实现侧滑菜单效果

    本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码,供大家参考,具体内容如下 先上效果图: 这个左右滑动以及上下滑动主要使用了Swiper的轮播功能,首先是该自定义组件的代码: <template> <div class="s-slider"> <swiper :options="horizontalSwiperOptions" ref="horizontalSwiper"> <swipe

  • vue-router 手势滑动触发返回功能

    vue-router的路由变换只存在"变换前"和"变换后",不存在"切换中"的状态,所以做不到大多数app(微信那样的)在滑动过程中让界面跟随手指移动.但滑动事件还是可以监听的,我们可以在滑动之后再触发路由回退事件. 微博的滑动返回基本上就是这样的原理:先滑动.再触发返回事件,但用起来很是怪异,有严重的滞后感.夸克浏览器做的就比较好:一是滑动时界面虽然不动,但是界面上有小图标提示,能让用户接受到反馈:二是返回过程很快,没有多余的过渡动画. app

  • 使用vue制作探探滑动堆叠组件的实例代码

    效果图如下所示: 前言 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件 一. 功能分析 简单使用下探探会发现,堆叠滑动的功能很简单,用一张图概括就是: 简单归纳下里面包含的基本功能点: 图片的堆叠 图片第一张的滑动 条件成功后的滑出,条件失败后的回弹 滑出后下一张图片堆叠到顶部 体验优化 根据触摸点的不同,滑动时首图有不同角度偏移 偏移面积判定是否成功滑出 二. 具体实现 有了归纳好的功

  • vue+jquery+lodash实现滑动时顶部悬浮固定效果

    本文实例为大家分享了vue实现滑动时顶部悬浮固定效果的具体代码,供大家参考,具体内容如下 这个效果是一个项目中抽出来的一个demo效果. 前期准备: 1. 引入jQ <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 引入lodash.js npm install lodash -D fixTop.vue组件的 <template> <div class=

  • vue移动UI框架滑动加载数据的方法

    vue移动UI框架滑动加载数据的方法

    前言 在我们移动端还有一个很常用的组件,那就是滑动加载更多组件.平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现下拉刷新功能)!!下面我们就一起来实现这个组件. 效果展示 先上一个gif图片展示我们做成后的效果,如下: DOM结构 页面应该包含三个部分:1. 正文区域 2.加载小菊花以及记载文字 3.所有数据加载完成后的文字: <div ref="scroll" class="

  • vue移动端写的拖拽功能示例代码

    相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实现步骤html 总结了一下评论,好像发现大家都碰到了滑动的问题.就在

随机推荐