需求:
封装一个轮播图组件
功能:
1.有上下切换的点击图标,可以实现点击切换上下张
2.底部有小圆点,对应每一张图片,图片切换,小圆点对应切换
3.小圆点可以点击切换,对应的图片也会切换
功能实现
父组件通过自定义属性传值传递包含图片的数组变量,
子组件通过prorps接收数组,循环渲染数组中的图片
新建公共组件src/components/carousel/index.vue
html部分:
- 轮播图图片部分由ul套li套img构成
- 上一张下一张图片由
- 底部小圆点
<template><div class="home-banner"><div class="carousel"><!--轮播图图片部分 --><ul class="carousel-body"><li class="carousel-item fade"><img src="" alt="" /></li></ul><!-- 上一张下一张箭头图标 --><a href=" javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a><a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a><!-- 底部小圆点 --><div class="carousel-indicator"><span class="active"></span><span></span><span></span><span></span><span></span></div></div></div>
</template>
css部分
- 轮播图切换通过类名fade的opacity实现
- 加上transition使变化更加顺滑
- 给span设置border-radius变成小圆点
<style scoped lang="less">
.home-banner {width: 1240px;height: 500px;position: absolute;left: 0;top: 0;z-index: 98;background-color: pink;
}
.carousel {width: 100%;height: 100%;min-width: 300px;min-height: 150px;position: relative;.carousel {&-body {width: 100%;height: 100%;}&-item {width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;transition: opacity 0.5s linear;&.fade {opacity: 1;z-index: 1;}img {width: 100%;height: 100%;}}&-indicator {position: absolute;left: 0;bottom: 20px;z-index: 2;width: 100%;text-align: center;span {display: inline-block;width: 12px;height: 12px;background: rgba(0, 0, 0, 0.2);border-radius: 50%;cursor: pointer;~span {margin-left: 12px;}&.active {background: #fff;}}}&-btn {width: 44px;height: 44px;background: rgba(0, 0, 0, 0.2);color: #fff;border-radius: 50%;position: absolute;top: 228px;z-index: 2;text-align: center;line-height: 44px;opacity: 0;transition: all 0.5s;&.prev {left: 20px;}&.next {right: 20px;}}}&:hover {.carousel-btn {opacity: 1;}}
}
</style>
父组件中引入轮播图组件,传入数组
1.导入轮播图组件,页面使用组件名便签(此处为局部组件注册,可以注册为全局组件)
2.模拟轮播图数据,对象数组,每个对象有图片数据imageUrl和id
3.通过自定义属性把轮播图数据传递给子组件
父组件部分
<script setup lang='ts'>
import Carousel from "@/components/carousel/index.vue"
import { ref } from "vue";
const bannerList = ref([{ imageUrl: "1.jpg", id: 1 },{ imageUrl: "2.jpg", id: 2 },{ imageUrl: "3.jpg", id: 3 },{ imageUrl: "4.jpg", id: 4 },{ imageUrl: "5.jpg", id: 5 }
])
</script>
<template><Carousel :slides="bannerList" />
</template>
<style scoped>
</style>
子组件接收父组件数据并渲染
- v-for循环渲染图片.key值绑定item.id
- v-for循环渲染底部小圆点span,使小圆点个数与图片个数相同
<script lang="ts" setup name="Carousel">
const { slides } = defineProps<{slides: []
}>()
</script>
.....省略<!-- 轮播图图片 --><ul class="carousel-body"><li class="carousel-item "fade v-for="(item, index) in slides":key="item.id"><img :src="item.imageUrl" alt="" /></li></ul>
......省略<!-- 底部小圆点 --><div class="carousel-indicator"><span v-for="(item, index) in slides" active :key="item.id"></span></div>
实现点击上下张图标切换图片,点击底部小圆点切换图片
点击上下张图标切换图片:
- 给上下图表注册事件pre和next
- 定义一个变量active记录当前显示图片的下标
- 判断active记录的下标和当前下标是否一致来显示图片(fade类名 )
点击底部小圆点切换图片:
- 给每一个span注册点击事件,点击时把当前小圆点index赋值给active
- active变化,由于active是响应式数据,所以图片变化为和active相同的index图片(fade类名实现)
- 小圆点实现高亮变化同样依靠类名实现:class=“{ active: active === index }”,当active和当前index相同时获得active类名,小圆点变为白色
<script lang="ts" setup name="Carousel">
import { ref } from 'vue';
const { slides } = defineProps<{slides: []
}>()
//高亮下标
const active = ref(0)
// 上一张下一张
const prev = () => {active.value--if (active.value < 0) {active.value = slides.length - 1}
}
const next = () => {active.value++if (active.value > slides.length - 1) {active.value = 0}
}
</script
<template><div class="carousel" @mouseenter="stop" @mouseleave="start"><!-- 轮播图图片 --><ul class="carousel-body"><li class="carousel-item " :class="{ fade: active === index }" v-for="(item, index) in slides":key="item.id"><RouterLink :to="item.hrefUrl"><img :src="item.imgUrl" alt="" /></RouterLink></li></ul><a href="javascript:;" class="carousel-btn prev" @click="prev"><i class="iconfont icon-angle-left"></i></a><a href="javascript:;" class="carousel-btn next" @click="next"><i class="iconfont icon-angle-right"></i></a><!-- 底部小圆点 --><div class="carousel-indicator"><span v-for="(item, index) in slides" @click="active=index" :class="{ active: active === index }":key="item.id"></span></div></div>
</template>
总结
组件传值
封装组件可以通过父子组件传值,插槽传值,实现数据传递
轮播图实现无限滚动
我们需要在图片到达临界时对index进行处理,实现图片首尾衔接
- 当index小于零时,把index赋值为最后的index
- 当index大于最后的index时,把index值赋值为0
// 上一张下一张
const prev = () => {active.value--if (active.value < 0) {active.value = slides.length - 1}
}
const next = () => {active.value++if (active.value > slides.length - 1) {active.value = 0}
}
实现小圆点点击高亮切换
- 首先设置一个active高亮类,加了这个类则对应小圆点高亮
- 设置一个active记录当前选中的小圆点的index值,当active和当前index相同时对应的span获得active类名
:class="{ active: active === index }"
- 给每一个span注册点击事件,当点击时,更改active值为点击的小圆点的index
@click="active=index"
最后
整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。
有需要的小伙伴,可以点击下方卡片领取,无偿分享