vue 使用轮播图时遇到的问题

发布时间:2023年12月19日

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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。