Question

我想摆脱v-slide-group上的箭头，并能够通过使用台式机上的鼠标滚轮来滚动它，目前只能在移动视口上滚动。

这可能吗？

我的模板：

    <v-layout justify-center>
      <div style="width: 600px; background-color: red">
        <v-slide-group center-active active-class="success">
          <v-slide-item v-slot:default="{ active, toggle }"
            v-for="(item, idx) in 25"
            :key="idx"
            >
              <v-card
                @click="toggle"
                class="mx-2 rounded-lg"
                width="250"
                height="175"
                :ripple="{ class: 'rounded-lg' }"
                :color="active ? undefined : 'grey lighten-1'"
              />
          </v-slide-item>
        </v-slide-group>
      </div>
    </v-layout>

css

.v-slide-group__next {
  display: none;
}
.v-slide-group__prev {
  display: none;
}

还有一个Codepen：

https://codepen.io/willcolmenares/pen/qBNWRKY

Answer 1

我知道了，但是我不确定它是否是最好的方法（破坏了我真正喜欢的中央活动动画）。

.v-slide-group__wrapper {
  overflow-x: auto; /* Enables the horizontal scrollbar */
  /* Next lines hides scrollbar in different browsers for styling purposes */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.v-slide-group__wrapper::-webkit-scrollbar {
  display: none; /* Chrome opera and Safary */
  width: 0px;
  background: transparent;
}

Vuetify v-slide-group水平鼠标滚动

1 个答案: