vue版云课堂项目

最新推荐文章于 2024-10-06 14:15:37 发布

CHUAIXYu

最新推荐文章于 2024-10-06 14:15:37 发布

阅读量61

点赞数

文章标签： vue.js 前端 javascript html css

本文链接：https://blog.csdn.net/chuaixingyu/article/details/128572392

版权

vue项目——云课堂轮播图

代码部分

<template>
  <a-carousel autoplay arrows>
    <div
        slot="prevArrow"
        class="custom-slick-arrow"
        style="left: 10px;zIndex: 1"
    >
      <a-icon type="left"/>
    </div>
    <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
      <a-icon type="right"/>
    </div>
    <div class="imgBox" v-for="(item,index) in imgList" :key="index"
         :style="`background-image: url(${item.imgUrlPc})`"></div>
  </a-carousel>
</template>
<script>
export default {
  name: 'CarouselChart',
  data() {
    return {
      imgList: []
    }
  },
  created() {
    this.$axios.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=5').then(res => {
      // console.log(res.data.data);
      this.imgList = res.data.data
    })
  }
};
</script>