vue实现无缝轮播（跑马灯效果）

最新推荐文章于 2023-10-19 16:51:46 发布

原创

最新推荐文章于 2023-10-19 16:51:46 发布 · 4.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了如何使用Vue.js来创建一个无缝轮播组件，通过创建Sweiper.vue和SweiperItem.vue两个组件，并利用v-model传递数据实现自动轮播功能。在轮播过程中，组件间的通信确保了显示的图片与选定的值相匹配，从而达到平滑的跑马灯效果。

1.首先创建两个vue组件Sweiper.vue和SweiperItem.vue;
2.将两个组件引入页面，Sweiper.vue中用v-model传参（v-model 其实是语法糖，默认属性value和默认事件input）；
代码中我是通过v-model的selcted将值传给Sweiper（子组件），自动轮播时子组件再通过触发input事件将即将显示的值传回给父组件
3.核心是要让selected的值传到SweiperItem中，与SweiperItem中的name值相等判该显示哪张图片；

<template>
  <div>
    <Sweiper v-model="selected">
      <!--v-model是个语法糖，相当于value和input事件-->
      <Sweiper-item  name="item1">
        <div class="item">
          <img :src="getImg('01')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item2">
        <div class="item">
          <img :src="getImg('02')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item3">
        <div class="item">
          <img :src="getImg('03')" alt="">
        </div>
      </Sweiper-item>
    </Sweiper>
  </div>
</template>
这里的图片没有通过数组用v-for循环，方便大家看其结构形式
<script>
  import Sweiper from "../components/Sweiper.vue";
  import SweiperItem from "../components/SweiperItem.vue";
  export default {
   
   
    name: "mySweiper",
    components: {
   
   
      Sweiper,
      SweiperItem
    },
    data() {
   
   
      return {
   
   
        selected: "item1",//默认第一张
      }
    },
    methods:{
   
   
      getImg(url){
   
   
        return