如何仅在移动网格上使用 vue-awesome-swiper 组件答案

【问题标题】：How to use vue-awesome-swiper component only on mobile grid如何仅在移动网格上使用 vue-awesome-swiper 组件
【发布时间】：2020-09-16 19:34:12
【问题描述】：

我有两个带有内容的引导列。在大尺度上，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>

【问题讨论】：

标签： javascript html twitter-bootstrap vue.js

【解决方案1】：

这个问题的简单解决方案（但不是最漂亮的）是使用 Bootstrap 的 display utilities 来定义何时显示滑块以及何时显示列。

这个解决方案的缺点是必须定义你的内容两次。一次用于普通列，一次用于幻灯片。

在下面的示例中，我在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>

【讨论】：