第一步:新建组件
src/components/Slider/index.vue
<template>
<div class="box" style="height:500px">
<div class="xtx-slider" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
<!-- 图片列表 -->
<ul class="slider-body">
<!--
li由于是绝对定位的关系 所有会重合 后面的会覆盖前面的
fade其实一个关键的类名 谁身上有fade 谁就会显示
-->
<li class="slider-item" :class="{fade: index === curIdx}" v-for="(item,index) in sliders" :key="item.id">
<img :src="item.imgUrl" />
</li>
</ul>
<!-- 圆圈切换按钮 -->
<div class="slider-indicator">
<span
:class="{active: index === curIdx}"
v-for="(item,index) in sliders"
:key="item.id"
@click="handerClick(index)"
></span>
</div>
</div>
</div>
</template>
<script>
/*
(tab切换类交互)
1. 点击圆圈 切换图片
思路分析:
1. 图片个数和小圆圈图标个数是一致 下标值一一对应
2. 谁身上有名称为fade类名就会得到显示
3. 核心:点击圆圈记录当前激活下标 然后通过li自己的下标index匹配下标 如果发生匹配就显示fade 否则不显示fade
2. 自动播放
思路分析:
1. curIdx的变化会导致fade类型切换 从而让图片切换
2. 自动播放就是从之前点击切换curIdx 变成让它自己变 (++)
3. 优化
1. 组件卸载时清除定时器
2. 鼠标移入的时候停止 鼠标移除再次开启
props
1. 依赖的图片列表数据
2. 自动轮播的时间
3. 是否开启自动轮播
*/
import { ref, onUnmounted, onMounted } from 'vue'
export default {
name: 'XtxSlider',
props: {
sliders: {
type: Array,
default: () => {
return []
}
},
time: {
type: Number,
default: 1500
},
isAuto: {
type: Boolean,
default: true
}
},
setup (props) {
const curIdx = ref(0)
function handerClick (index) {
// 点击哪项 curIdx记录就是哪项的下标值
curIdx.value = index
console.log(curIdx.value)
}
// 自动播放
let timer = null
// 开启定时器
function startTimer () {
// 加一个判断 如果用户不想开启 就直接return后面不执行
if (!props.isAuto) {
return
}
timer = setInterval(() => {
curIdx.value++
// 判断最多增到哪里就应该停止
// length 2 增加到1
if (curIdx.value === props.sliders.length) {
curIdx.value = 0
}
}, props.time)
}
// 移除定时器
function stopTimer () {
clearInterval(timer)
}
// 鼠标移入
function mouseEnter () {
stopTimer()
}
// 鼠标移出
function mouseLeave () {
// 开启定时器
startTimer()
}
onMounted(() => {
startTimer()
})
// 清除
onUnmounted(() => {
clearInterval(timer)
})
return {
curIdx,
handerClick,
mouseEnter,
mouseLeave
}
}
}
</script>
<style scoped lang='less'>
.xtx-slider {
width: 100%;
height: 100%;
min-width: 300px;
min-height: 150px;
position: relative;
.slider {
&-body {
width: 100%;
height: 100%;
}
&-item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
// 完全透明
opacity: 0;
transition: opacity 0.5s linear;
// fade关键类名
&.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 {
.slider-btn {
opacity: 1;
}
}
}
</style>
第二步:注册全局组件
src/components/index.js
// 插件定义
// import Skeleton from './Skeleton'
import Slider from './Slider' //轮播图组件
// 1. 定义插件
const plugin = {
install(app) {
// createApp方法得到的应用实例对象
// 全局注册组件
// app.component('Skeleton', Skeleton)
app.component(Slider.name, Slider) // Slider.name 是组件中export default中的name ,全局引用时应该用name的值
}
}
export default plugin
第三步:使用组件
测试组件
<template>
<div style="background-color: #fff;">
<!-- 骨架屏组件测试 -->
<!-- <Skeleton :height="40" bg-color="red"/>
<Skeleton :width="50" :height="20"/>
<Skeleton :width="120" :height="60"/> -->
<!-- 测试轮播图 -->
<XtxSlider :sliders="sliders" :time="1000" :is-auto="true"/>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const sliders = ref([
{
hrefUrl: '/#/',
id: '630000201807155635',
imgUrl: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/images/b1.jpg'
},
{
hrefUrl: '/#/',
id: '650000201207058528',
imgUrl: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/images/b2.jpg'
}
])
return {
sliders
}
}
}
</script>
实际使用
<template>
<div class="home-banner">
<XtxSlider :sliders="list"/>
</div>
</template>
<script>
import { findBanner } from '@/api/home'
import { ref, onMounted } from 'vue'
export default {
name: 'HomeBanner',
setup () {
const list = ref([])
async function loadList () {
const res = await findBanner()
console.log(res)
list.value = res.result
}
onMounted(() => {
loadList()
})
return {
list
}
}
}
</script>
<style scoped lang='less'>
.home-banner {
width: 1240px;
height: 500px;
position: absolute;
left: 0;
top: 0;
z-index: 98;
}
</style>