Question

我有一个自定义滑块，如果数组中实际上有任何匹配并索引的幻灯片，我只想显示下一个和上一个按钮...

因此，如果im在最后一张幻灯片上，则应该只显示“上一个”按钮，如果是第一张幻灯片，则只显示“下一个按钮” ...

我目前对如何执行此操作有些犹豫。.我看过array.findIndex（），但是没有运气。

html：

<transition-group name='fade' tag='div'  mode="in-out">
      <div class="slide" v-for="(case_item, index) in cases" :key="case_item.id" v-show="current_slide_number === index" :class="{'is-active-slide': current_slide_number === index}">
        <div class="case-slider__info">
          <h2>{{case_item.role}} {{index}}</h2>
          <h3>{{case_item.title}}</h3>
          <app-button title="Se projekt" button-type="primary" :show-icon="false" display="block"></app-button>
        </div>
        <div class="case-slider__image">
          <img src="http://via.placeholder.com/600x350" />
        </div>
      </div>
    </transition-group>
    <div class="case-slider__navigation">
      <div class="next" @click="nextSlide">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.255 47.255" style="enable-background:new 0 0 47.255 47.255;" xml:space="preserve" width="512px" height="512px">
        <g>
          <path d="M12.314,47.255c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l21.92-21.92l-21.92-21.92   c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0L35.648,22.92c0.391,0.391,0.391,1.023,0,1.414L13.021,46.962   C12.825,47.157,12.57,47.255,12.314,47.255z" fill="#FFFFFF"/>
        </g>
      </svg>
      </div>
      <div class="prev" @click="prevSlide">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.255 47.255" style="enable-background:new 0 0 47.255 47.255;" xml:space="preserve" width="512px" height="512px">
        <g>
          <path d="M34.941,47.255c-0.256,0-0.512-0.098-0.707-0.293L11.607,24.334c-0.391-0.391-0.391-1.023,0-1.414L34.234,0.293   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-21.92,21.92l21.92,21.92c0.391,0.391,0.391,1.023,0,1.414   C35.453,47.157,35.197,47.255,34.941,47.255z" fill="#FFFFFF"/>
        </g>
      </svg>
      </div>
    </div>

数组im遍历：

cases: [
      {
        id: 1,
        title: "test1",
        link: "http://tv2.dk",
        role: 'A role of some sort'
      },
      {
        id: 2,
        title: "test2",
        link: "http://tv2",
        role: 'A role of some sort'
      },
      {
        id: 3,
        title: "test3",
        link: "http://tv2",
        role: 'A role of some sort'
      },
      {
        id: 4,
        title: "test4",
        link: "http://tv2",
        role: 'A role of some sort'
      }
    ]

还有我的nexy / prev函数

nextSlide(event) {
    event.preventDefault();
    this.current_slide_number += 1;
  },
  prevSlide(event) {
    event.preventDefault();
    this.current_slide_number -= 1;
  }

我希望有人能指出我正确的方向...？：）

Answer 1

您需要在v-if="cases.length-1!=current_slide_number"按钮上添加next的支票，以便在最后一种情况下将其隐藏。
对于上一个按钮，检查slide_number=0将执行v-if="current_slide_number!=0"

下面是代码段

function callMe() {
  var vm = new Vue({
    el: '#root',
    data: {
      current_slide_number: 0,
      cases: [{
          id: 1,
          title: "test1",
          link: "http://tv2.dk",
          role: 'A role of some sort'
        },
        {
          id: 2,
          title: "test2",
          link: "http://tv2",
          role: 'A role of some sort'
        },
        {
          id: 3,
          title: "test3",
          link: "http://tv2",
          role: 'A role of some sort'
        },
        {
          id: 4,
          title: "test4",
          link: "http://tv2",
          role: 'A role of some sort'
        }
      ]
    },
    methods: {
      nextSlide(){
          this.current_slide_number++;
      },
      prevSlide(){
          this.current_slide_number--;
      }

    }

  })
}
callMe();

.case-slider__navigation{
width:40%
}
.prev{
float:left
}
.next{
float:right
}
h5{margin:0px}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>

  <div class="slide" v-for="(case_item, index) in cases" :key="case_item.id" v-show="current_slide_number === index" :class="{'is-active-slide': current_slide_number === index}">
    <div class="case-slider__info">
      <h5>{{case_item.role}} {{index}}</h5>
      <h5>{{case_item.title}}</h5>
    </div>
    <div class="case-slider__image">
      <img src="http://via.placeholder.com/200x100" />
    </div>
  </div>


  <div class="case-slider__navigation">
    <div class="next" v-if="cases.length-1!=current_slide_number">
      <button @click="nextSlide">next</button>
    </div>
    <div class="prev" v-if="current_slide_number!=0">
      <button @click="prevSlide">previous</button>
    </div>
  </div>

</div>

vue自定义滑块，下一个和上一个按钮

1 个答案: