13.Home-banner轮播图功能实现

原创已于 2025-08-04 12:14:42 修改 · 325 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2025-08-04 12:14:24 首次发布

小兔鲜电商项目实战专栏收录该内容

19 篇文章

订阅专栏

轮播图实现

1.准备模板+2.熟悉elementPlus

<script setup>

</script>



<template>
  <div class="home-banner">
    <el-carousel height="500px">
      <el-carousel-item v-for="item in 4" :key="item">
        <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>



<style scoped lang='scss'>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;

  img {
    width: 100%;
    height: 500px;
  }
}
</style>

3.获取接口数据


import  httpInstance  from '@/utils/http'
//获取banner
export function getBannerAPI (){
  return httpInstance({
    url:'/home/banner'
  })
}

渲染

<script setup>
    import {getBannerAPI} from '@/apis/home'
  import {ref} from 'vue'

cost bannerList = ref([])
  const getBanner = async() => {
    const res = await getBannerAPI()
    console.log(res)
    bannerList.value = res.result

  }
onMounted(() => getBanner)
  
  
</script>



<template>
  <div class="home-banner">
    <el-carousel height="500px">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <img :src="item.imgUrl" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>



<style scoped lang='scss'>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;

  img {
    width: 100%;
    height: 500px;
  }
}
</style>