vueでのスワイパーの操作方法

今回はvueでswiperを使う方法とvueでswiperを使う際の注意点を紹介します。以下は実際的なケースですので見てみましょう。

スワイパーの紹介

スワイパーは、モバイル Web サイトでのコンテンツのタッチ スライドによく使用されます。

Swiper は、純粋な JavaScript で作成されたスライド特殊効果プラグインで、携帯電話、タブレット、その他のモバイル端末を対象としています。

スワイパーは、タッチスクリーンのフォーカス画像、タッチスクリーンのタブ切り替え、タッチスクリーンのマルチ画像切り替えなどの一般的な効果を実現できます。

Swiper はオープンソースで、無料で、安定していて、使いやすく、強力です。モバイル端末の Web サイトを構築するには重要な選択肢です。

vueでswiperプラグインを使用する際に、swiperプラグインが正常に動作しないことが判明した問題を解決するため

今回はバックグラウンドからデータを削除してからバインドすることをシミュレートしました。スワイパータグ内のデータ。

<template> 
 <p class="homePage"> 
  <abc></abc> 
  <p id="banner"> 
   <p class="swiper-container"> 
     <p class="swiper-wrapper"> 
     <p class="swiper-slide" v-for="items in swiper" ><a href=""><img :src=" rel="external nofollow" items.activity.img"></a></p> 
     </p> 
     <p class="swiper-pagination"></p> 
   </p> 
  </p> 
 </p> 
</template> 
<script> 
import Swiper from "../../static/js/swiper-3.4.0.min.js"; 
import header from 'components/header.vue'; 
export default { 
 components : { 
  abc : header 
 }, 
 data(){ 
 return { 
  swiper:"" 
 } 
 }, 
 mounted(){ 
 this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){ 
   this.swiper=res.data.data.slide; 
   var mySwiper = new Swiper('.swiper-container', { 
   autoplay: 2000,//可选选项，自动滑动 
    //分页器 
   pagination : '.swiper-pagination', 
   paginationClickable :true, 
   observer: true 
   }) 
  }) 
 } 
 
} 
</script> 
<style type="text/css"> 
 @import "../../static/css/home.css"; 
 @import "../../static/css/swiper-3.4.0.min.css"; 
</style>

重要な点は、mounted() の中でこれらのメソッドを使用する必要があることです。mounted() は、インスタンスがマウントされるまで実行されないことも理解できます。トリガーされたメソッドに。

vue でスワイパーがどのように使用されるかを見てみましょう

まず、npm i vue-awesome-swiper --save

を通して vue にプラグインをダウンロードしてから、それを main.js に導入します

require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

次に、コードを使用するコンポーネント

<p class="banner">
<swiper :options="swiperOption">
<swiper-slide v-for="items in allData.bannerphoto" key="items">
<img :src="items" alt="">
</swiper-slide>
<p class="swiper-pagination" slot="pagination"></p>
</swiper>
<p class="jc"></p>
</p>

を作成し、データ内にカルーセル画像を定義します

swiperOption: {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: false,
coverflow: {
　　rotate: 30,
　　stretch: 10,
　　depth: 60,
　　modifier: 2,
　　slideShadows : true
　　}
},

この時のカバーフローは、カルーセル画像を切り替える方法であり、属性を変更することでカルーセルモードを切り替えることができます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue でコンポーネント カルーセル切り替え効果を実現

演算子のオーバーロードの使用方法

以上がvueでのスワイパーの操作方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。