轮播是前端页面运用的比较广泛的一个功能。
在有限空间内,循环播放同一类型的图片、文字等内容。
今天主要学习了Element UI中Carousel 走马灯这一功能的使用方法。
1、基础用法
1、默认 Hover 指示器触发
<template>
<div>
<el-carousel>
<el-carousel-item v-for="item in imgwrap" :key="item.url">
<img :src="item.url"/>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
data(){
return{
imgwrap:[
{url:require("../assets/img/pic1.jpg")},
{url:require("../assets/img/pic2.jpg")},
{url:require("../assets/img/pic3.jpg")},
{url:require("../assets/img/pic4.jpg")},
{url:require("../assets/img/pic5.jpg")}
]
}
}
}
</script>
<style>
.el-carousel-item img{
width: 100%;
height: 100%;
}
</style>
如图:
一般情况下我们导入的图片宽高都是100%,有时候不能准确的计算出容器的宽高,就会遇到图片不能完全显示出来的问题。
将代码改成下面的就可以解决了
<template>
<div>
<el-carousel :height="bannerHeight + 'px'">
<el-carousel-item v-for="item in imgwrap" :key="item.url">
<img :src="item.url" class="bannerimg"/>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
data(){
return{
bannerHeight: 200,
imgwrap:[
{url:require("../assets/img/pic1.jpg")},
{url:require("../assets/img/pic2.jpg")},
{url:require("../assets/img/pic3.jpg")},
{url:require("../assets/img/pic4.jpg")},
{url:require("../assets/img/pic5.jpg")}
]
}
},
mounted(){
this.setSize();
window.addEventListener('resize', ()=>{
this.setSize();
},false);
},
methods:{
setSize(){
this.bannerHeight = document.body.clientWidth / 4
}
}
}
</script>
<style>
.bannerimg{
width: 100%;
height: inherit;
}
</style>
如图
2、Click 指示器触发
默认情况下,在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click,可以达到点击触发的效果。
3、指示器位置
indicator-position属性定义了指示器的位置。默认情况下,它会显示在走马灯内部。
indicator-position=“outside” 外部
如图:
indicator-position=“none” 不会显示指示器
4、切换箭头
arrow = “always” 一直显示
arrow = “never” 一直隐藏
arrow = “hover” 鼠标悬停时显示
2、卡片化
type=“card” 启用卡片模式
如图:
3、改变方向
默认情况下,direction 为 horizontal。
通过设置 direction 为 vertical 来让轮播上下播放。
如图: