javascript - 如何在 vue.js 中销毁滑块 vue-awesome-swiper?
问题描述
我需要销毁桌面上的 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,
}
},
},
}
},
解决方案
在元素上使用 v-if 怎么样,swiper
这样在桌面上查看时它不会被渲染?
您将创建一个方法来检测客户端是台式机还是平板电脑并将结果传递给v-if
属性。
推荐阅读
- spring-boot - 从 credhub 加载属性并在 PCF 清单中使用
- gitlab - 如何克隆到 gitlab-runner 用户的主目录?
- python-3.x - 有效地计算数组最后一维的点积
- javascript - 如何从 JSON 对象中获取值
- github - 如何将公共 ssh 密钥添加到私人仓库?
- c# - 如何连接来自 [Route] 和 CRUD 操作标头的路由字符串
- html - 如何摆脱电子邮件模板中的 html 表格边框
- sql - 将 UNION all 与具有变量赋值的查询一起使用时出错
- jenkins - 如何获取特定节点中存在的所有项目的列表?
- c# - 如何将小数点放在整数中