vue 使用轮播图时遇到的问题
2023-12-19 21:45:00
vue 避免轮播绑定的 data 改变后将轮播 index 归零,(修改源码,添加传参)将当前轮播 index 赋值为当前点击 marker 的索引
最近在做项目的过程中,需要在地图添加轮播图
- 要实现的功能:
- 地图上marker根据返回的数据分为东北、东南、西南、西北四个方向,从西北方向依次轮播,且与其对应marker的轮播图数据同步轮播(代表轮播图也需要分为4组)
- 当鼠标移入地图后,轮播停止
- 当鼠标选中某个marker后,轮播图需要轮播到对应的轮播图(如果当前点击的marker刚好是当前轮播marker组的最后一个,则将轮播图绑定的数组追加下一波的数据)
- 鼠标移出地图后从当前选中的轮播图开始继续轮播
在做的过程中发现,当一组(如西北方向)的marker轮播完成切换到另一组(如东北方向)时,marker显示正常,但是轮播图的索引会归零,所以想到了要更改源码来控制其索引不让其归零,
- 找到elementUi.js中的轮播图设置当前轮播图索引的方法进行如下修改,代码如下
setActiveItem: function (e,page) {
if ('string' == typeof e) {
var t = this.items.filter(function (t) {
return t.name === e
})
t.length > 0 && (e = this.items.indexOf(t[0]))
}
if (((e = Number(e)), isNaN(e) || e !== Math.floor(e)))
console.warn(
'[Element Warn][Carousel]index must be an integer.'
)
else {
if(page == 'owner') {
var i = this.items.length,
n = this.activeIndex;
this.activeIndex = e
n === this.activeIndex && this.resetItemPosition(n),
this.resetTimer()
} else {
var i = this.items.length,
n = this.activeIndex
;(this.activeIndex =
e < 0
? this.loop
? i - 1
: 0
: e >= i
? this.loop
? 0
: i - 1
: e),
n === this.activeIndex && this.resetItemPosition(n),
this.resetTimer()
}
}
},
- 使用
this.$refs.carousel.setActiveItem(i, 'owner')
文章来源:https://blog.csdn.net/weixin_46328739/article/details/135086613
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!