vue2+elementui+Carousel 轮播显示图片问题

没有名字随便喊

已于 2022-04-29 10:20:46 修改

阅读量1.8k

点赞数

分类专栏： vue element 文章标签： vue elementui

于 2022-04-28 17:25:43 首次发布

本文链接：https://blog.youkuaiyun.com/wyp_comeon/article/details/124479079

版权

vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

element

1 篇文章

订阅专栏

本文展示了如何利用Vue.js和Element UI库创建一个带有外部指示器和循环功能的轮播图组件。代码中，遍历后台返回的数据msfcList，重新组织为适合轮播展示的格式，并设置了相应的CSS样式，如高度、宽度和布局。在方法中，通过处理数据来确保轮播图的双列展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码片段：

    <template>
      <el-carousel indicator-position="outside" :loop="true" trigger="click" class="msfcListUl">
        <el-carousel-item  v-for="(item1,index) in msfcList" :key="index" class="car-item">
          <div class="flexDiv itemDiv" v-for="(item, index2) in item1" :key="index2">
            <div class="left">
              <p class="imgBox"><img :src="item.Cover" alt=""></p>
            </div>
            <div class="right">
              <i>{{item.Title}}</i>
              <em>{{item.Author}}</em>
              <p class="detail"><a :href="item.Url">{{item.Describe}}</a></p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </template>

msfcList是后台返回数据

方法：

    created(){
      let newDataList = []
        let current = 0
        if(this.msfcList && this.msfcList.length>0){
          for(let i=0;i<=this.msfcList.length-1;i++){
            if(i%2 !== 0 || i === 0 ){
              if(!newDataList[current]){
                newDataList.push([this.msfcList[i]])
              }else{
                newDataList[current].push(this.msfcList[i])
              }
            }else{
              current++
              newDataList.push([this.msfcList[i]])
            }
          }
        }
        this.msfcList = [...newDataList]
    }

css

/deep/.el-carousel__container{
    height: 268px;
    .car-item {
      width: 100%;
      display: flex;
      .itemDiv{
        margin-right: 44px;
      }
    }
  }