Question

在左列上获取以下动态生成的内容：

<div v-for="index in total" :key="index">
    <h2>Dynamic content: <span v-text="index + ' of ' + total"></span></h2>
</div>

在页面右上方的固定位置有一个按钮：

<div style="position: fixed; top: 1em; right: 1em;">
    <button v-on:click="autoScrollToDivAtCurrentIndex"></button>
</div>

我希望按钮将下一个div移到页面顶部。

为澄清。第一个代码块在左侧的一列中生成n个div。第二个div在右列顶部的固定位置包含一个按钮。我希望该按钮在单击时将左栏中的“下一个” div移动到页面顶部。

我正在使用vue.js。

Answer 1

我认为您可以从以下解决方案中激发灵感，以实现自己的目标，在这种情况下，我们应该移动内容而不是div元素，因为如果我们要移动需要CSS代码和一些代码的div元素，逻辑来处理。

new Vue({
  el: '#app',
  data: {
    total: [1, 2, 3, 4, 5, 6],
    next: 1
  },
  methods: {
    autoScrollToDivAtCurrentIndex() {

      if (this.next == this.total.length) {
        this.next = 1;
        this.total = [1, 2, 3, 4, 5, 6]
        
      } else {
        this.next++;
        this.total.splice(this.next - 1, 1);
        this.total.unshift(this.next);
      }

    }

  }

})

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div v-for="(c,index) in total" :key="index">
      <h2>Dynamic content: <span v-text="c + ' of ' + total.length"></span></h2>
    </div>
    <div style="position: fixed; top: 1em; right: 1em;">
      <button v-on:click="autoScrollToDivAtCurrentIndex" class="btn btn-primary">Move</button>
    </div>
  </div>
</body>

Answer 2

我通过为div赋予唯一且动态的ID来解决此问题：

<div v-for="index in total" :key="index" :id="'id_' + index">
    <h2>Dynamic content: <span v-text="index + ' of ' + total"></span></h2>
</div>

在Vue.js中添加以下变量：

new Vue({
    nextElement: 1,
}

按钮本身不需要更改：

<div> style="position: fixed; top: 1em; right: 1em;">
    <button v-on:click="autoScrollToDivAtCurrentIndex"></button>
</div>

以及以下方法：

autoScrollToDivAtCurrentIndex(){
    let ele = document.getElementById('id_' + this.nextElement);
    window.scrollTo(ele.offsetLeft,ele.offsetTop);
    this.nextElement++;
}

单击时将动态生成的内容移到页面顶部。 Vue.js

2 个答案: