Element Ui的走马灯Carousel时,当内容长度为2时循环方向异常
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
当走马灯只有两项时,第一次切换时动画效果是右滑,第二次切换时变成了左滑
就变成了左右左右来回切换而不是一个方向无限循环
解决办法
当数据只有两项时复制一遍数据,比如1,2 ==>1,2,1,2
自定义指示器,在只有两项时显示自定义的指示器,同时,监听自定义指示器的点击事件,切换幻灯片的索引
同时监听幻灯片的change事件,用以控制自定义指示器的选中样式
代码可以直接复用 css html js 都有
<div class="banner" :class="imgStatus ? 'loopTwoImg' : 'loopOneImg'">
<el-carousel
height="600px"
width="100%"
trigger="click"
indicatorPosition="none"
arrow="true"
indicator-position
@change="carouselChange"
>
<el-carousel-item v-for="(item, index) in bannerData" :key="index">
<div
class="slide-img"
@click="linkAddress(item.addressUrl)"
:style="item.addressUrl ? { cursor: 'pointer' } : {}"
>
<img
alt
:style="item.addressUrl ? { cursor: 'pointer' } : {}"
:src="
item.imgeUrl
? URL + '/api/eipe/download?id=' + item.imgeUrl
: item
"
/>
</div>
</el-carousel-item>
</el-carousel>
</div>
data() {
return {
imgStatus: false,
bannerData: [],
URL: process.env.VUE_APP_BANNER_URL,
}
},
methods: {
carouselChange(data) {
if (data == 0 || data == 1) {
//当为第一组数据的时候,打开当前的指示器,隐藏第二组数据的指示器
this.imgStatus = true
} else {
//当为第二组数据的时候,打开当前的指示器,隐藏第一组数据的指示器
this.imgStatus = false
}
},
linkAddress(linkAddress) {
if (linkAddress) {
window.open(linkAddress)
}
},
async getEipeImgeList() {
let data = await this.$api.hall.getEipeImgeList()
if (data.length === 2) {
this.imgStatus = true
//将2条数据复制一份为4条数据
this.bannerData = data.concat(data)
} else {
this.imgStatus = false
//其他时候正常赋值
this.bannerData = data
}
},
}
<style scoped lang="less">
/deep/ .loopOneImg {
.el-carousel__indicators {
& > li:nth-child(1),
& > li:nth-child(2) {
display: none;
}
}
}
/deep/ .loopTwoImg {
.el-carousel__indicators {
& > li:nth-child(3),
& > li:nth-child(4) {
display: none;
}
}
}
</style>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)