Question

要解决的问题：

我有一个滑块，必须在幻灯片之间制作动画，而不是立即转到nex / prev。

情景：

（你会发现问题末尾的所有代码都是小提琴）我的模板上有下一个结构（请查看小提琴以检查样式）：

<div id="app">
  <div id="slider">
    <ul id="slide-wrap" @click="nextSlide" @click.middle="prevSlide">
      <li v-for="(slide, index) in slides" :key="index" class="slide">
        <div class="content">
          {{slide.id}}
        </div>
      </li>
    </ul>
  </div>
</div>

在我的脚本中，在mounted（）方法中，我定义了我需要的所有变量（包括幻灯片）：

new Vue({
  el: '#app',
  mounted() {
    const thiss = this;
    this.sliderWidth = document.getElementById('slider').offsetWidth;
    this.sliderList = document.getElementById('slide-wrap');
    this.slider = document.getElementById('slider');
    this.slide = document.querySelectorAll('.slide');
    window.addEventListener('resize', () => {
      thiss.sliderWidth = document.getElementById('slider').offsetWidth;
    });
  },
  data() {
    return {
      slider: '',
      sliderList: '',
      slide: null,
      count: 0,
      sliderWidth: 0,
      slides: [
        {
          id: 1,
        },
        {
          id: 2,
        },
        {
          id: 3,
        },
        {
          id: 4,
        },
      ],
    };
  },
  computed: {
    items() {
      return this.slides.length;
    },
  },
  methods: {
    call() {
      console.log(this.slide);
    },
    nextSlide() {
      if (this.count < (this.items-1)) {
        this.count = this.count + 1;
        for (let i = 0; i < this.items; i++ ) {
          this.slide[i].style.transform = 'translateX(- + this.count * this.sliderWidth +px)';
        }
      } else {
        this.count = 0;
        for (let i = 0; i < this.items; i++ ) {
          this.slide[i].style.transform = 'translateX(- + this.count * this.sliderWidth +px)';
        }
      }
    },
  },
})

问题在于nextSlide（）方法，抛出错误“无法读取未定义的属性.style”尽管我用call（）方法检查了变量并且它返回了dom上的元素，我是什么做错了？

如果你检查小提琴，脚本末尾是一段注释代码，另一个解决方案改变了.slide-wrap元素的位置，但我需要新的解决方案来修改translateX（X ）每个.slide元素的属性

https://jsfiddle.net/carlosPisarello/hc3rz5g4/10/

Answer 1

Vue为这样的事情处理style属性，所以你不应该为此直接操作DOM。

所有偏移量都相同，因此您只需在Vue级别进行计算并将其应用于所有偏移量：

  <li v-for="(slide, index) in slides" :key="index" class="slide" :style="transform">

计算结果如下：

transform() {
  const amount = - this.count * this.sliderWidth;
  const transformArg = `translateX(${amount}px)`;

    return {transform: transformArg};
}

你的nextSlide就是：

nextSlide() {
  if (this.count < (this.items-1)) {
    this.count = this.count + 1;
  } else {
    this.count = 0;
  }
}

Updated fiddle

无法在for循环中读取未定义的.style属性（Vue.js）

1 个答案: