[英]How to destroy slider vue-awesome-swiper in vue.js?
I need to destroy vue-awesome-swiper on desktop and leave on tablet screen.我需要销毁桌面上的 vue-awesome-swiper 并留在平板电脑屏幕上。 exactly destroy, and not disable swipe.
完全销毁,而不是禁用滑动。 But can I destroy swiper?
但是我可以摧毁 swiper 吗? In directive:options I pass params and component-tag swiper will be worked in any case.
在指令:选项中,我传递了参数,并且组件标签 swiper 在任何情况下都将起作用。 Only without passed params
只有没有传递的参数
<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,
}
},
},
}
},
What about using v-if on swiper
element so it won't be rendered when viewed on desktop?在
swiper
元素上使用 v-if 怎么样,这样在桌面上查看时它不会被渲染?
You would create a method that detects if the client is desktop or tablet and pass the result to the v-if
attribute.您将创建一个方法来检测客户端是台式机还是平板电脑,并将结果传递给
v-if
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.