组件封装 - 轮播图组件

轮播图组件封装, 我们主要分为三大步来完成:

1. 基本布局

2. 渲染结构

3. 逻辑封装

我们这里封装的轮播图组件和 Element UI 所封装的走马灯组件有所不同

Element UI 是直接渲染组件来决定的, 我们所封装的是根据数据来决定

首先我们来完成第一大步(基本布局)

思路分析:

1. 首先需要一个父盒子对轮播图组件进行约束, 父盒子根据情况来是否给定位; 设置宽高

2. 轮播图组件根据外部的父盒子的宽高走, 设置100%; 自身设置相对定位

3. 通过样式去设置好左右切换图片的按钮位置, 用户自定义图片位置的圆点位置和显示图片的位置

4. 显示的图片我们可以将所有的图片叠在一起, 定义一个 fade 类; 通过图片的下标值来动态的控制 opacity 类的值

5. 还需要设置 active 类, 用户点击圆点的时候; 将点击的那一个高亮

<template><div class='xtx-carousel'><ul class="carousel-body"><!-- 所有图片列表 --><li class="carousel-item fade"><RouterLink to="/"><img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg" alt=""></RouterLink></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 v-for="i in 5" :key="i"></span></div></div>
</template><script>
export default {name: 'XtxCarousel'
}
</script><style scoped lang="less">
.xtx-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类&.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类&.active {background:  #fff;}}}&-btn {width: 44px;height: 44px;background: rgba(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. 我们结构是根据后端的数据来的, 所以轮播图组件需要暴露出一个 sliders 出去接收父组件传入来的数据

2. 轮播图组件内部还需要暴露出一个记录下标值的响应式变量, 它的默认值是 0 , 默认显示第一种图片和默认高亮第一个计步器按钮

<template><div class='xtx-carousel'><ul class="carousel-body"><!-- 所有图片列表 --><li class="carousel-item" v-for="(item, i) in sliders" :key="item.id" :class="{fade: i===index}"><RouterLink to="/"><img :src="item.imgUrl" alt=""></RouterLink></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 v-for="(item, i) in sliders" :key="item" :class="{active: i===index}"></span></div></div>
</template><script>
import { ref } from 'vue'
export default {name: 'XtxCarousel',props: {sliders: {type: Array,default: () => []}},setup () {// 记录图片的下标值变量const index = ref(0)return { index }}
}
</script>

第三步(逻辑封装)

先梳理一下大致要实现的效果:

1. 需要兼容自动轮播效果

2. 鼠标进入停止自动轮播, 鼠标离开继续

3. 点击左右切换按钮, 切换前后图片

4. 点击计步器时, 切换对应的图片

5. 组件销毁时, 清除定时器

第一个需求(兼容自动轮播)

思路分析:

1. 首先是否自动轮播是用户来决定的, 且轮播时间间隔也是一样

2. 所以, 轮播图组件内部需要暴露出 autoPlay 和 duration 两个属性

3. 将自动轮播效果封装成一个函数

4. 使用定时器, 通过修改 index 值来控制图片的切换

5. 调用自动轮播是有条件的, sliders 是否有数据(没有图片的时候, 去做轮播是没有必要的); autoPlay 的值是否为真

<script>
import { ref, watch } from 'vue'
export default {name: 'XtxCarousel',props: {// 轮播图数据sliders: {type: Array,default: () => []},// 是否制动轮播autoPlay: {type: Boolean,default: false},// 轮播时间间隔duration: {type: Number,default: 3000}},setup (props) {// 记录图片的下标值变量const index = ref(0)let timer = nullconst autoPlayFn = () => {// 清除掉上一个定时器, 避免定时器的累加// 特别是开发热更新的项目时clearInterval(timer)timer = setInterval(() => {index.value++if (index.value >= props.sliders.length) {index.value = 0}}, props.duration)}// 监听sliders值的变化watch(() => props.sliders, (newVal) => {if (newVal.length && props.autoPlay) {autoPlayFn()}// 加上immediate的含义在于, 可能父组件传进来的数据并不是发请求获取的数据// 可能是定死的数据, 那么组件初始化的时候就会有数据// 不加上immediate的话, 就永远监听不到sliders的变化的了// 那么永远就不会做轮播}, { immediate: true })return { index }}
}
</script>

// 因为autoPlay是一个布尔值, 所以直接写autoPlay就代表为true
<XtxCarousel :sliders="sliders" autoPlay />

第二个需求(鼠标进入停止轮播, 离开继续)

思路分析:

1. 定义一个 stop 函数, 判断如果 timer 存在; 则清除定时器

2. 定义一个 start 函数, 鼠标离开时开启轮播

3. @mouseenter事件调用 stop 函数, @mouseleave事件调用start函数

<template><div class='xtx-carousel' @mouseenter="stop" @mouseleave="start"><ul class="carousel-body"><!-- 所有图片列表 --><li class="carousel-item"v-for="(item, i) in sliders" :key="item.id":class="{fade: i===index}"><RouterLink to="/"><img :src="item.imgUrl" alt=""></RouterLink></li></ul>......</div>
</template><script>
import { ref, watch } from 'vue'
export default {name: 'XtxCarousel',props: {// 轮播图数据sliders: {type: Array,default: () => []},// 是否制动轮播autoPlay: {type: Boolean,default: false},// 轮播时间间隔duration: {type: Number,default: 1000}},setup (props) {......// 鼠标进入停止轮播const stop = () => {if (timer) clearInterval(timer)}// 鼠标离开开始轮播const start = () => {if (props.sliders.length && props.autoPlay) {autoPlayFn()}}return { index, stop, start }}
}
</script>

第三个需求(点击左右切换按钮, 切换图片)

思路分析:

1. 封装一个 toggle 函数, 此函数接收一个 step 数据

2. 用户点击上一张按钮时 step 值为 -1, 下一张按钮时 step 值为 1

<template><div class='xtx-carousel' @mouseenter="stop" @mouseleave="start">......<!-- 左箭头 --><a @click="toggle(-1)" href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a><!-- 右箭头 --><a @click="toggle(1)" href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>......</div>
</template><script>
import { ref, watch } from 'vue'
export default {name: 'XtxCarousel',......setup (props) {......// 点击左右切换按钮, 切换图片const toggle = (step) => {// 重新定义一个变量的原因是, 可能index.value + step的值会大于可控范围// 所以需要定义新的变量, 判断const newIndex = index.value + stepif (newIndex > props.sliders.length - 1) {index.value = 0return}if (newIndex <= 0) {index.value = props.sliders.length - 1return}// 正常情况index.value = newIndex}return { index, stop, start, toggle }}
}
</script>

第四个需求(点击计步器切换按钮, 切换图片)

点击时, 将对于的下标值赋值

<!-- 计数器 -->
<div class="carousel-indicator"><span @click="index=i" v-for="(item, i) in sliders" :key="item" :class="{active: i===index}"></span>
</div>

第五个需求(组件销毁时清除定时器)

<script>
// 组件销毁时, 清除定时器
onUnmounted(() => {clearInterval(timer)
})
</script>

组件封装 - 轮播图组件相关推荐

js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js
介绍 Glider.js是一个依赖原生js的轮播图组件库,因为其压缩后仅仅2.8k大小,其拥有着很好的性能,Glider.js在Github上开源,目前已拥有2.4kstars. Github htt ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
ionic组件-Slides轮播图
Slides轮播图组件 ionic中的轮播图组件是基于swiper插件,所以配置slides的属性需要在swiper的API中找: Swiper触摸滑动插件:https://www.swiper.co ...
Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
Vue2 轮播图组件原生slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
小程序轮播图组件跳转到自定义页面
1.轮播图组件wxml代码 2.轮播图组件js 3.在页面引入轮播图组件 4.设置页面js 5.未跳转之前页面 6.点击轮播图跳转
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
【微信小程序】好看的轮播图组件
微信小程序好看的轮播图组件效果示例使用步骤第一步: 新建components文件夹第二步: 按照以下目录创建文件:(文件名可以自定义,但后面引入组件时应保持前后一致) 第三步: 各个文件的代码: ...

组件封装 - 轮播图组件

组件封装 - 轮播图组件相关推荐

最新文章

热门文章