javascript - 如何仅在移动网格上使用 vue-awesome-swiper 组件
问题描述
我有两个带有内容的引导程序。在大尺度上,cols 占据了行的一半,而在移动尺度上,cols 占据了所有的行宽,并且像典型的网格一样位于另一个之上。我想在移动规模上使用 vue-awesome-swiper,这样我就可以滑动列而不是向下滚动到底部。同时,我不需要大规模的 swiper,列适合一行宽度。我怎样才能发财呢?如何仅在移动规模上使用 vue-awesome-swiper 组件,而不是在大型规模上使用它。一些代码来说明这种情况:
<div class="row h-100">
<div class="col gauche">
<!-- Some content here -->
</div>
<div class="col gauche">
<!-- Some content here -->
</div>
</div>
带刷卡器:
<div class="row h-100">
<swiper class="swiper">
<swiper-slide>
<div class="col gauche">
<!-- Some content here -->
</div>
</swiper-slide>
<swiper-slide>
<div class="col gauche">
<!-- Some content here -->
</div>
</swiper-slide>
</swiper>
</div>
解决方案
这个问题的简单解决方案(但不是最漂亮的)是使用 Bootstrap 的显示实用程序来定义何时显示滑块以及何时显示列。
这个解决方案的坏处是必须定义你的内容两次。一次用于普通列,一次用于幻灯片。
在下面的示例中,我在md
断点处“交换”,但您可以将其更改为适合您的需要。
<div class="row d-none d-md-flex">
<div class="col-md-6" v-for="{ text } in items">
<column-content :text="text"></column-content>
</div>
</div>
<div class="row d-md-none">
<div class="col-12">
<swiper>
<swiper-slide v-for="{ text } in items" class="px-2">
<column-content :text="text"></column-content>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
Vue.use(VueAwesomeSwiper)
Vue.component('column-content', {
template: '#column-content',
props: ['text'],
data() { return { text: '123'} }
})
new Vue({
el: '#app',
data() {
return {
items: [
{
text: 'Some Text 1'
},
{
text: 'Some Text 2'
},
]
}
}
})
<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/swiper@5.3.6/css/swiper.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@5.3.6/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper"></script>
<div id="app">
<div class="container">
<div class="row d-none d-md-flex">
<div class="col-md-6" v-for="{ text } in items">
<column-content :text="text"></column-content>
</div>
</div>
<div class="row d-md-none">
<div class="col-12">
<swiper>
<swiper-slide v-for="{ text } in items" class="px-2">
<column-content :text="text"></column-content>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</div>
</div>
<template id="column-content">
<div class="card">
<div class="card-body">
{{ text }}
</div>
</div>
</template>
推荐阅读
- java - 使用 Flight Recorder 和 JDK Mission Control 计算更多方法
- amazon-web-services - 我可以通过 AWS Quicksight 访问具有“存储桶和非公共对象”访问权限的 AWS S3 存储桶吗?
- sql - 无法在 SQL Server 中删除外键
- autoit - 使用 AutoIT 打开 RDP 文件
- flutter - Flutter:根据上下文更改文本的优雅方式
- python - 在循环中使用熊猫数据阅读器创建多个数据框
- python - 在桶中分配价值
- list - 如何反转列表 - 方案
- c# - Azure DevOps YAML 管道失败,并显示“没有预期的序列”
- unit-testing - 单元测试 http.MultipartForm