[JavaScript知识库]vue+element之carousel走马灯的使用（The use of vue+element carousel）

2022.10.13

大家好，今天我使用了vue+element实现走马灯的效果，类似于轮播图，可以进行一个图片的滑动。

Hello, everyone. Today, I used vue+element to realize the effect of rotating lights, which is similar to the wheel cast diagram, and can slide an image.

接下来就让我向大家展示如何使用它，并且解决其中遇到的问题。

Let me show you how to use it and solve the problems you encounter.

首先是element官方文档里面的写法。
The first is the way it's written in element's official documentation.

（Element - The world's most popular Vue UI framework）

<!-- carousel走马灯 -->
    <el-carousel
      :interval="3000"
      type="card"
      height="300px"
     
    >
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

/* 走马灯样式 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

这是最初始的写法，实现的效果如图：

This is the initial way of writing, and the effect is shown below:

看上去是不是和swipter轮播图差不多，所以当时我就想直接把跑马灯变成轮播图实现。?

It looks similar to swipter, so at that time I wanted to directly turn the running light into a wheel.

我的做法是这样的：

<el-carousel-item v-for="item in list" :key="item">

把4换成list，存放数组，然后就要新建一个数组。

I'm going to replace 4 with list, store the array, and then I'm going to create a new array.

data(){
    return{
      list:[
        {img:require('../assets/img/a.jpg')},
        {img:require('../assets/img/b.jpg')},
        {img:require('../assets/img/c.jpg')}
      ]
    }
  }

当时我把data后面的括号变成：以及return后面多加了：然后就导致我的list数组没有被定义。

I changed the parentheses after data to: and the parentheses after return to:, which resulted in my list being undefined.

接着就要用差值表达式渲染数据。

Then you render the data with a difference expression.

 <el-carousel-item v-for="item in list" :key="item">
       <img :src="item.img" >
      </el-carousel-item>

src和:src的区别，src是当成字符串解析，:src是当成变量解析。?

The difference between src, which is parsed as a string, and :src, which is parsed as a variable.

效果如图所示：

The effect is shown as follows:

这样就实现了一个swipter轮播图。?

In this way, a swipter rotcast graph is implemented.

大家喜欢的话点个赞，支持一下！

If you like it, click a like and support it!