使用elementUI中的Carousel组件实现水平+垂直滚动的效果

最新推荐文章于 2024-04-29 17:45:34 发布

无名之辈程序媛

最新推荐文章于 2024-04-29 17:45:34 发布

阅读量1.8k

点赞数 1

分类专栏： elementUI Carousel水平+垂直滚动文章标签： elementui 前端 javascript 水平+垂直滚动 Carousel组件

本文链接：https://blog.csdn.net/qq_41161982/article/details/127911334

版权

elementUI 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Carousel水平+垂直滚动

1 篇文章 0 订阅

订阅专栏

首先使用el-carousel组件实现水平滚动的效果，之后在组件内部嵌套垂直方向的滚动，效果如下所示（不知道怎么录制视频上传上来，想哭，就这样凑合着看吧）：

代码实现：

  <el-carousel
      height="80px"
      style="width: 180px"
      :interval="30000"          //水平方向30s滚动一次
      indicator-position="none"  //不显示指示器
      arrow="never"             //不显示箭头
    >
      <el-carousel-item v-for="(item, index) in InfoData" :key="index">
        <div style="font-size: 16px; color: #abb4c2; margin-bottom: 5px">
          {{ item.type }}
        </div>
        <div>
          <el-carousel
            height="60px"
            style="width: 180px"
            :interval="3000"    //垂直方向3s滚动一次
            indicator-position="none"    
            arrow="never"
            direction="vertical"    //vertical垂直滚动，默认水平滑动
          >
            <el-carousel-item
              v-for="i in Math.ceil(item.member.length / 3)"
              :key="i"
            >
              <div
                v-for="(itemName, index) in item.member.slice(
                  (i - 1) * 3,
                  (i - 1) * 3 + 3
                )"
                :key="index"
              >             //为了一个滑片显示多条数据
                <div style="font-size: 14px; color: #abb4c2; line-height: 20px">
                  {{ itemName.name }}
                  <span
                    style="font-size: 14px; color: #abb4c2; margin-left: 5px"
                    >{{ itemName.tel }}</span
                  >
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-carousel-item>
    </el-carousel>

InfoData的数据结构

 this.InfoData = [
          {
            type: "保卫科",
           id: "804f84075e544adf9af8a054f110fac3b",
            member: [
              { name: "李四", tel: 11111111111},
              { name: "张三", tel: 18811818281 },
              { name: "王五", tel: 18811818281 },
              { name: "刘六", tel: 18811818281 },
              { name: "王思", tel: 18811818281 },
              { name: "张思", tel: 18811818281},
              { name: "李思", tel: 18811818281 },
              { name: "哈哈", tel: 22222221111 },
            ],
          },
          {
            type: "安全科",
           id: "804f84075e544adf9af8a054f110facb1",
            member: [
               { name: "李四", tel: 11111111111},
              { name: "张三", tel: 18811818281 },
              { name: "王五", tel: 18811818281 },
              { name: "刘六", tel: 18811818281 },
              { name: "王思", tel: 18811818281 },
              { name: "张思", tel: 18811818281},
              { name: "李思", tel: 18811818281 },
              { name: "哈哈", tel: 22222221111 },
            ],
          },
]