玫瑰埋葬于日落 2024-06-11 16:59 采纳率: 50%
浏览 105

vue3使用elementplus轮播不能自动开始

使用elementplus的过程中出现问题,界面刷新后轮播图并不会自己开始轮播,需要手动摸她一下才开始自动轮播


<template>
    <div>
        <el-carousel ref="img" :interval="400" type="card" :autoplay="true">
            <el-carousel-item v-for="(item, index) in list" :key="index">
                <img :src="item.img" alt="" />
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
import { checklunbo } from "@/api/api/lunbo";
export default {
    data() {
        return {
            list: [],
        };
    },
    created() {
        checklunbo().then((res) => {
            console.log(res);
            this.list = res.data.data;
        });
    },
    computed: {},
    mounted() {},
    methods: {},
};
</script>
<style lang="css" scoped>
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

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

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
img {
    width: 100%;
    height: 100%;
}
</style>

  • 写回答

5条回答 默认 最新

  • 暄和同学 2024-06-19 10:16
    关注

    在el-carousel标签上加上v-if="list.length",当list数组有值的时候再加载走马灯

    评论

报告相同问题?

问题事件

  • 创建了问题 6月11日

悬赏问题

  • ¥15 github录制项目
  • ¥15 H.264选择性加密例程
  • ¥50 windows的SFTP服务器如何能批量同步用户信息?
  • ¥15 centos7.9升级python3.0的问题
  • ¥15 如何解决调试dev-出++5.11不成功问题
  • ¥15 安装CentOS6时卡住
  • ¥20 关于#监控系统#的问题,如何解决?(相关搜索:系统软件)
  • ¥20 c语言写的8051单片机存储器mt29的模块程序
  • ¥60 求直线方程 使平面上n个点在直线同侧并且距离总和最小
  • ¥50 java算法,给定试题的难度数量(简单,普通,困难),和试题类型数量(单选,多选,判断),以及题库中各种类型的题有多少道,求能否随机抽题。