搜索
首页web前端js教程Vue做出内部组件轮播切换步骤详解

这次给大家带来Vue做出内部组件轮播切换步骤详解,Vue做出内部组件轮播切换的注意事项有哪些,下面就是实战案例,一起来看一下。

对于那些不需要路由的内部组件,在切换的时候希望增加一个轮播过渡的效果,效果如下:

我们可以引入一个轮播组件,但是有个问题,通常轮播组件都会把所有的slide都渲染出来再进行切换,这样就导致所有的资源都会触发加载,这可能不是我们所期待的,毕竟如果slide比较多的情况需要一次性加载的图片等资源太多了。所以我们可以手动简单地写一个,满足需求即可。

现在一步步来实现这个功能,先写一个实现基本切换的demo.

1. 实现切换

先用vue-cli搭建一个工程脚手架,使用以下命令:

npm install -g vue-cli
vue init webpack slide-demo # 运行后router等都选择no

这样就搭了一个webpack + vue的工程,进入slide-demo目录,查看src/App.vue,这个文件是初始化工具提供的,是整个页面的组件。还有一个src/components目录,这个是放子组件的目录。

在这个目录里面新建3个组件:task-1.vue、task-2.vue、task-3.vue,然后在App.vue里面import进来,如下App.vue所示:

<script>
// import HelloWorld from './components/HelloWorld'
import Task1 from "./components/task-1";
import Task2 from "./components/task-2";
import Task3 from "./components/task-3";
export default {
  name: 'App',
  components: {
    Task1,
    Task2,
    Task3
  }
}
</script>

我们的数据格式questions是这样的:

[{index: 1, type: 1, content: ''}, {index: 2, type: 1, content: ''},
{index: 3, type: 2, content: ''}, {index: 4, type: 3, content: ''}]

它是一个数组,数组里的每个元素代表每道题,每道题都有一个类型,如选择题、填空题、判断题等,分别对应上面的task-1、task-2、task-3,我们用一个currentIndex变量表示当前是在哪道题,初始化为0,如下代码所示(添加到App.vue里面):

  data() {
    return {
      currentIndex: 0
    };
  },
  created() {
    // 请求question数据
    this.questions = [
      {index: 1, type: 1, question: ''}, /*...*/];
  },

通过改变currentIndex的值,从而切到一下题即下一个组件,要怎么实现这个切换的效果呢?

可以使用Vue自定义的一个全局组件component,给合它的is属性,达到动态改变组件的目的,如下代码所示:

<template>
<p id="app">
  <p class="task-container">
    <component :is="&#39;task-&#39; + questions[currentIndex].type" 
    </component>
  </p>
</p>
</template>

当currentIndex增加时,就会改变:is里面的值,依次从task-1变到task-2、task-3等,这样component就会换成相应的task组件。

接着,再添加一个切换到下一题的按钮,在这个按钮的响应函数里面改变currentIndex的值。同时把question的数据传给component:

<template>
<p id="app">
  <p class="task-container">
    <component :is="&#39;task-&#39; + questions[currentIndex].type" 
      :question="questions[currentIndex]"></component>
    <button class="next-question" @click="nextQuestion">下一题</button>
  </p>
</p>
</template>

响应函数nextQuestion实现如下:

methods: {
  nextQuestion() {
    this.currentIndex = (this.currentIndex + 1) 
        % this.questions.length;
  }
},

具体每个task的实现参考如task-1.vue示例:

<template>
<section>
  <h2>{{question.index}}. 选择题</h2>
  <p>{{content}}</p>
</section>
</template>
<script>
export default {
  props: ["question"]
}
</script>

最后的效果如下(加上题目内容):

2. 添加轮播切换效果

轮播切换通常是把所有的slide都拼起来,拼成一张长长的横图,然后改变这个横图在显示容器里面的位置,如老牌jQuery插件flipsnap.js,它是把所有的slide都float: left,形成一张长图,然后 改变这张长图的translate值 ,达到切换的目的。这个插件的缺点是没有办法从最后一张切回第一张,解决这个问题的方法之一是不断地移动DOM:每次切的时候都把第一张移到最后一张的后面,这样就实现了最后一张点下一张的时候回到第一张的目的,但是这样移来移去地对性能消耗比较大,不是很优雅。另外一个轮播插件jssor slider,它也是把所有的slide都渲染出来,然后每次切换的时候都 动态地计算每张slide的translate的值 ,而不是整体长图的位置,这样就不用移动DOM节点,相对较为优雅。还有很多Vue的轮播插件的实现也是类似上面提到的方式。

不管怎么样,上面的轮播模式都不太适用于我们的场景,其中一个是这种答题的场景不需要切回上一题,每道题做完就不能回去了,更重要的一个是我们 不希望一次性把所有的slide都渲染出来 ,这样会导致每张幻灯片里的资源都触发加载,就比如img标签虽然你把它display: none了,但是只要它的src是一个正常的url,它就会请求加载。 由于slide往往会比较多,就不使用这种轮播插件了。

还可以使用Vue自带的transition,但是transition的问题是,切下一个的时候,上一个不见了,因为被销毁了,只有下一个的动画,并且不能预加载下一个slide的资源。

所以我们手动实现一个。

我的想法是每次都准备两个slide,第1个slide是当前展示用的,第2个slide拼在它的后面,准备切过来,当第2个slide切过来之后,删掉第1个slide,然后在第2个的后面再接第3个slide,不断地重复这个过程。如果我们没有使用Vue,而是自己增删DOM,那么没什么问题,可以很任性地自己发挥。 使用Vue可以怎么优雅地实现这个功能呢

在上面一个component的基础上,再添加一个component,刚开始第1个component是当前展示的,而第2个component是拼在它右边的,当第2个切过去之后,就把第1个移到第2的后面,同时把内容改成第3个slide的内容,依此类推。使用Vue不太好动态地改DOM,但是可以 借助jssor slider的思想 ,不移动DOM,只是改变component的translate的值。

给其中一个component套一个next-task的类,具有这个类的组件就表示它是下一张要出现的,它需要translateX(100%),如下代码所示:

<template>
<p id="app">
  <p class="task-container">
    <component :is="&#39;task-&#39; + questions[currentIndex].type" 
      ></component>
    <component :is="&#39;task-&#39; + questions[currentIndex + 1].type" 
      class="next-task"></component>
  </p>
</p>
</template>
 
<style>
.next-task {
  display: none;
  transform: translateX(100%);
  /* 添加一个动画,当改变transform的值时就会触发这个动画 */
  transition: transform 0.5s ease;
}
</style>

上面代码把具有.next-task类的component隐藏了,这样是做个优化,因为display: none的元素只会构建DOM,不会进行layout和render渲染。

所以就把问题转换成怎么在这两个component之间,切换next-task的类。一开始next-task是在第2个,当第2个切过来之后,next-task变成加在第1个上面,这样轮流交替。

进而,发现一个规律,如果currentIndex是偶数话,如o、2、4…,那么next-task是加在第2个component的,而如果currentIndex是奇数,则next-task是加在第1个component的。所以可以根据currentIndex的奇偶性切换。

如下代码所示:

<template>
<p id="app">
  <p class="task-container">
    <component :is="&#39;task-&#39; + questions[evenIndex].type" 
      :class="{&#39;next-task&#39;: nextIndex === evenIndex}"
      ref="evenTask"></component>
    <component :is="&#39;task-&#39; + questions[oddIndex].type" 
      :class="{&#39;next-task&#39;: nextIndex === oddIndex}
      ref="oddTask"></component>
  </p>
</p>
</template>
 
<script>
 
export default {
  name: 'App',
  data() {
    return {
      currentIndex: 0, // 当前显示的index
      nextIndex: 1,  // 表示下一张index,值为currentIndex + 1
      evenIndex: 0,  // 偶数的index,值为currentIndex或者是currentIndex + 1
      oddIndex: 1   // 奇数的index,值同上
    };
  },
}

第1个component用来显示偶数的slide,第2个是用来显示奇数的slide(分别用一个evenIndex和oddIndex代表),如果nextIndex是偶数的,那么偶数的component就会有一个next-task的类,反之则亦然。然后在下一题按钮的响应函数里面改变这几个index的值:

methods: {
  nextQuestion() {
    this.currentIndex = (this.currentIndex + 1) 
      % this.questions.length;
    this._slideToNext();
  },
  // 切到下一步的动画效果
  _slideToNext() {
 
  }
}

nextQuestion函数可能还有其它一些处理,在它里面调一下_slideToNext函数,这个函数的实现如下:

_slideToNext() {
  // 当前slide的类型(currentIndex已经加1了,这里要反一下)
  let currentType = this.currentIndex % 2 ? "even" : "odd",
    // 下一个slide的类型
    nextType = this.currentIndex % 2 ? "odd": "even";
  // 获取下一个slide的dom元素
  let $nextSlide = this.$refs[`${nextType}Task`].$el;
  $nextSlide.style.display = "block";
  // 把下一个slide的translate值置为0,原本是translateX(100%)
  $nextSlide.style.transform = "translateX(0)";
  // 等动画结束后更新数据
  setTimeout(() => {
    this.nextIndex = (this.currentIndex + 1) 
      % this.questions.length;
    // 原本的next是当前显示的slide
    this[`${nextType}Index`] = this.currentIndex;
    // 而原本的current slide要显示下下张的内容了
    this[`${currentType}Index`] = this.nextIndex;
  }, 500);
}

代码把下一个slide的display改成block,并把它的translateX的值置为0,这个时候不能马上更新数据触发DOM更新,要等到下一个slide移过去的动画结束之后再开始操作,所以加了一个setTimeout,在回调里面调换nextTask的类,加到原本的current slide,并把它的内容置成下下张的内容。这些都是通过改变相应的index完成的。

这样基本上就完成了,但是我们发现一个问题,切是切过去了,就是没有动画效果。这个是因为从display: none变到display: block是没有动画的,要么改成visibility: hidden到visible,要么触发动画的操作加到$nextTick或者setTimeout 0里面,考虑到性能问题,这里使用第二种方案:

$nextSlide.style.display = "block";
// 这里使用setimeout,因为$nextTick有时候没有动画,非必现
setTimeout(() => {
  $nextSlide.style.transform = "translateX(0)";
  // ...
}, 0);

经过这样的处理之后,点下一题就有动画了,但是又发现一个问题,就是偶数的next-task会被盖住,因为偶数的是使用第一个component,它是会被第二个compoent盖住的,所以需要给它加一个z-index:

.next-task { 
  display: none;
  transform: translateX(100%);
  transition: transform 0.5s ease;
  z-index: 2;
}

这个问题还比较好处理,另外一个不太好处理的问题是:动画的时间是0.5s,如果用户点下一题的速度很快在0.5s之内,上面的代码执行就会有问题,会导致数据错乱。如果每次切到下一题之后按钮初始化都是disabled,因为当前题还没答,只有答了才能变成可点状态,可以保证0.5s的时间是够的,那么就可以不用考虑这种情况。但是如果需要处理这种情况呢?

3. 解决点击过快的问题

我想到两个方法,第一个方法是用一个sliding的变量标志当前是否是在进行切换的动画,如果是的话,点击按钮的时候就直接更新数据,同时把setTimeout 0.5s的计时器清掉。这个方法可以解决数据错乱的问题,但是切换的效果没有了,或者是切换到一半的时候突然就没了,这样体验不是很好。

第二个方法是延后切换,即如果用户点击过快的时候,把这些操作排队,等着一个个做切换的动画。

我们用一个数组表示队列,如果当前已经在做滑动的动画,则入队暂不执行动画,如下代码所示:

methods: {
  nextQuestion() {
    this.currentIndex = (this.currentIndex + 1) 
      % this.questions.length;
    // 把currentIndex插到队首
    this.slideQueue.unshift(this.currentIndex);
    // 如果当前没有滑动,则执行滑动
    !this.sliding && this._slideToNext();
  },
}

每次点击按钮都把待处理的currentIndex插到队列里面,如果当前已经在滑动了,则不立刻执行,否则执行滑动_slideToNext函数:

_slideToNext() {
  // 取出下一个要处理的元素
  let currentIndex = this.slideQueue.pop();
  // 下一个slide的类型
  let nextType = currentIndex % 2 ? "odd" : "even";
  let $nextSlide = this.$refs[`${nextType}Task`].$el;
  $nextSlide.style.display = "block";
  setTimeout(() => {
    $nextSlide.style.transform = "translateX(0)";
    this.sliding = true;
    setTimeout(() => {
      this._updateData(currentIndex);
      // 如果当前还有未处理的元素,
      // 则继续处理即继续滑动
      if (this.slideQueue.length) {
        // 要等到两个component的DOM更新了
        this.$nextTick(this._slideToNext);
      } else {
        this.sliding = false;
      }
    }, 500);
  }, 0);
},

这个函数每次都先取出当前要处理的currentIndex,然后接下来的操作和第2点提到的一样,只是在0.5s动画结束后的异步回调里面需要判断一下,当前队列是否还有未处理的元素,如果有的话,需要继续执行_slideToNext,直到队列空了。这个执行需要挂在nextTick里面,因为需要等到两个component的DOM更新了才能操作。

这样理论上就没问题了,但实际上还是有问题,感受如下:

我们发现有些slide没有过渡效果,而且不是非必现的,没有规律。经过一番排查,发现如果把上面的nextTick改成setTimeout情况就会好一些,并且setTimeout的时间越长,就越不会出现失去过渡效果的情况。但是这个不能从根本上解决问题,这里的原因应该是Vue的自动更新DOM和transition动画不是很兼容,有可能是Vue的异步机制问题,也有可能是JS结合transition本身就有问题,但以前没有遇到过,具体没有深入排查。不管怎么样,只能放弃使用CSS的transition做动画。

如果有使用jQuery的话,可以使用jQuery的animation,如果没有的话,那么可以使用原生dom的animate函数,如下代码所示:

_slideToNext(fast = false) {
  let currentIndex = this.slideQueue.pop();
  // 下一个slide的类型
  let nextType = currentIndex % 2 ? "odd" : "even";
  // 获取下一个slide的dom元素
  let $nextSlide = this.$refs[`${nextType}Task`].$el;
  $nextSlide.style.display = "block";
  this.sliding = true;
  // 使用原生animate函数
  $nextSlide.animate([
    // 关键帧
    {transform: "translateX(100%)"},
    {transform: "translateX(0)"}
  ], {
    duration: fast ? 200 : 500,
    iteration: 1,
    easing: "ease"
  // 返回一个Animate对象,它有一个onfinish的回调
  }).onfinish = () => {
    // 等动画结束后更新数据
    this._updateData(currentIndex);
    if (this.slideQueue.length) {
      this.$nextTick(() => {
        this._slideToNext(true);
      });
    } else {
      this.sliding = false;
    }
  };
},

使用animate函数达到了和transition同样的效果,并且还有一个onfinish的动画结束回调函数。上面代码还做了一个优化,如果用户点得很快的时候,缩短过渡动画的时间,让它切得更快一点,这样看起来更自然一点。使用这样的方式,就不会出现transition的问题了。最后的效果如下:

这个体验感觉已经比较流畅了。

原生animate不兼容IE/Edge/Safari,可以装一个polyfill的库,如这个 web-animation ,或者使用其它一些第三方的动画库,或自己用setInterval写一个。

如果你要加上一题的按钮,支持返回上一题,那么可能需要准备3个component,中间那个用于显示,左右两边各跟着一个,准备随时切过来。具体读者可以自行尝试。

这种模式除了答题的场景,还有多封邮件预览、PPT展示等都可以用到,它除了有一个过渡的效果外,还能提前预加载下一个slide需要的图片、音频、视频等资源,并且不会像传统的轮播插件那样一下子把所有的slide都渲染了。适用于slide比较多的情况,不需要太复杂的切换动画。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue-cli怎样做出跨域请求

nodejs中如何使用websocket(附代码)

以上是Vue做出内部组件轮播切换步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何修复暗黑破坏神4蓝屏错误在Windows 11 / 10如何修复暗黑破坏神4蓝屏错误在Windows 11 / 10Jun 27, 2023 pm 01:16 PM

玩暗黑破坏神4时遇到蓝屏问题?好吧,您不是唯一一个在Reddit或其他论坛上抱怨此问题的人。只有当某些关键的系统组件无法承受暗黑破坏神4的要求时,蓝屏才会出现。因此,我们建议您按照这些解决方案快速解决问题并开始享受游戏。修复1–确保您的系统具有最少的支持暗黑破坏神4是一款对图形要求非常高的游戏,即使是最低的系统要求也令人困惑。这些是运行暗黑破坏神4的最低、推荐和超4k要求。最低要求–操作系统:64位Windows®10版本1909或更高版本处理器:英特尔®酷睿i5-2500K或AMDFX-835

如何在 Windows PC 上修复 Steam 登录错误 E84如何在 Windows PC 上修复 Steam 登录错误 E84Jun 28, 2023 am 08:20 AM

Steam登录错误E84是Steam用户在多次登录尝试中遇到的常见登录。如果您无法登录Steam,则无法执行任何有用的操作。如果您不先处理此E84登录错误,您将面临大量问题。初步解决方法–1.如果您是第一次在Steam中遇到此E84错误,重新启动系统可能会修复它。关闭Steam应用程序。将其从系统托盘中退出。然后,重新启动系统并重试整个过程。2.检查互联网连接是否有故障。如果您的互联网连接速度较慢,Steam登录可能会引发E84。修复1–将noreactlogin添加到Steam可执行文件您必须

如何修复写字板在 Windows 11/10 中无法打开的问题如何修复写字板在 Windows 11/10 中无法打开的问题Jun 28, 2023 am 08:51 AM

写字板是继记事本之后最快的工具,可以记下您丰富多彩的想法。但是,如果无法在计算机上打开写字板怎么办?写字板通常运行良好,并且打开速度非常快。但是,如果您的系统中缺少任何关键的写字板组件,写字板将无法打开。按照以下几组解决方案修复计算机上的问题。注意-由于写字板预安装在Windows上,因此您无法像执行任何其他本机应用商店应用程序那样直接重置或修复它。因此,只有一组最少的解决方案可用于解决问题。修复1–直接运行写字板您可以直接从安装目录运行写字板,并检查这是否有助于解决问题。步骤1–您需要打开文件

如何为您的 Windows lComputer 设置首选频段 [2023]如何为您的 Windows lComputer 设置首选频段 [2023]Jun 26, 2023 am 08:26 AM

几乎所有最新品牌的笔记本电脑都配备了双品牌WiFi。您可以将WiFi设置为5GHz或2.4GHz带宽。但是,事情并没有那么简单。笔记本电脑上的此功能很好地隐藏在设备管理器中,您无法从“设置”页面执行此操作。按照我们的指南为您的笔记本电脑、PC设置首选频段。注意–要切换到5GHz带宽WiFi,您需要WiFi路由器和设备都支持双频WiFi。如果它们中的任何一个都没有支持,则无法更改WiFi带宽。如何在设备上设置首选的WiFi频段设置首选频段以充分利用您的WiFi非常容易。方式1–设置首选频段步骤1–

如何检查iPhone型号国家如何检查iPhone型号国家Jul 09, 2023 pm 11:33 PM

您知道苹果将其产品的某些部分外包给不同的国家吗?是的。它们专门用于在这些国家/地区销售,因此在该国制造。您可能从其他人那里购买了二手iPhone/iPad,并且可能想知道是否有可能知道您的iPhone来自哪个国家。是的,有一种方法可以找出答案,我们现在将在本文中对此进行更多讨论。在这篇文章中,您将找到解释如何使用简单步骤了解iPhone原产国的方法。如何知道iPhone的原产国步骤1:首先,您应该点击主屏幕中的设置图标。第2步:这是打开“设置”应用程序,打开后,单击它转到“常规”选项,如下所示。

从 Windows 10/11 中删除用户帐户的 5大方法 [2023]从 Windows 10/11 中删除用户帐户的 5大方法 [2023]Jun 27, 2023 am 08:34 AM

您的WindowsPC上有多个过时的帐户?或者,由于某些错误,您是否在从系统中删除这些帐户时陷入困境?无论出于何种原因,您都应该尽快从计算机中删除那些未使用的用户帐户。这样,您将节省大量空间并修复系统中可能的漏洞点。在本文中,我们通过详细步骤详细阐述了多种用户帐户删除方法。方法1–使用设置这是从系统中删除任何帐户的标准方法。步骤1–按Win+I键应打开“设置”窗口。步骤2–转到“帐户”。第3步–找到“其他用户”将其打开。第4步–您将在屏幕右侧找到所有帐户。步骤5–只需在那里扩展帐户即可。在帐户和

如何在iPhone上提取RAR文件如何在iPhone上提取RAR文件Jul 12, 2023 pm 07:53 PM

很多时候,非常大的文件很难在设备之间共享,尤其是智能手机等。因此,这些文件首先被存档/压缩成RAR文件,然后发送到另一个设备进行共享。但问题是RAR文件不容易在iPhone上提取。要提取zip文件,只需轻点一下即可。没有多少人知道在iPhone上提取RAR文件的过程,对于初学者来说,这些步骤可能会令人困惑。可以使用iPhone上称为快捷方式的默认应用程序来完成此操作。我们在这里逐步解释了如何使用快捷方式应用程序在iPhone上提取任何RAR文件。如何在iPhone上提取RAR文件步骤1:首先,您

u盘怎么重装win11系统的步骤教程u盘怎么重装win11系统的步骤教程Jul 08, 2023 pm 09:33 PM

微软近日透露了将推出win11系统,很多用户都在期待新系统呢。网上已经有泄露关于win11的镜像安装系统。大家不知道如何安装的话,可以使用U盘来进行安装。小编现在就给大家带来了win11的U盘安装教程。1、首先准备一个8G以上大小的u盘,将它制作成系统盘。2、接着下载win11系统镜像文件,将它放入u盘中,大家可以直接点击右侧的链接进行下载。3、下载完成后装载该iso文件。4、装载完成之后会进入新的文件夹,在其中找到并运行win11的安装程序。5、在列表中选择“win11”然后点击“下一步”。6

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),