【问题标题】:How to destroy slider vue-awesome-swiper in vue.js?如何在 vue.js 中销毁滑块 vue-awesome-swiper?
【发布时间】:2020-05-29 09:40:49
【问题描述】:

我需要销毁桌面上的 vue-awesome-swiper 并留在平板电脑屏幕上。完全销毁,而不是禁用滑动。但是我可以摧毁 swiper 吗?在指令 :options 中,我传递了参数,并且组件标签 swiper 在任何情况下都将起作用。只有没有传递的参数

   <template lang="pug">
    .app
      swiper(:options="swiperOptions")
        swiper-slide(
          v-for="(slide, idx) in slides"
          :key="idx"
          )

    <script>

    import { swiper, swiperSlide } from 'vue-awesome-swiper'

    export default {
      name: 'MySlider',
      components: {
        swiper,
        swiperSlide
      },
      data() {
        return {
          slides: [
            {
              title: 'Заголовок 1',
              img: 'title.jpg',
            },
            {
              title: 'title2',
              img: 'slide2.jpg',
            },
            {
              title: 'title3',
              img: 'slide3.jpg',
            }
        ],
          swiperOptions: {
            slidesPerView: 5,
            spaceBetween: 21,
            // allowTouchMove: false,
            breakpoints: {
              992: {
                slidesPerView: 3,
                spaceBetween: 25,
              },
              768: {
                slidesPerView: 3.7,
                spaceBetween: 22,
              },
              640: {
                slidesPerView: 2.2,
                spaceBetween: 15,
                initialSlide: 0,
                centeredSlides: false,
              }
            },
          },
        }
      },

【问题讨论】:

    标签: javascript vue.js swiper swiperjs


    【解决方案1】:

    如何在swiper 元素上使用 v-if 以使其在桌面上查看时不会呈现?

    您将创建一个方法来检测客户端是台式机还是平板电脑,并将结果传递给v-if 属性。

    【讨论】:

    • 嗨!是的,我试过了。但在这种情况下,“swiper-slide”将被隐藏,因为它在 swiper 内部
    • 那么我想你只能禁用滑动,只要 swiper-slide 在滑动器内。
    • 在没有 swiper 的情况下创建另一个元素怎么样?您只能将此元素用于平板电脑。
    • 是的。我认为这个更合适的解决方案。在没有滑动器的情况下创建另一个元素。非常感谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-11
    • 2021-07-02
    • 1970-01-01
    • 2018-12-03
    • 1970-01-01
    • 2020-09-16
    相关资源
    最近更新 更多