Vueでのスワイパープラグインの使用

今回はvueでswiperプラグインを使用する際の注意事項をご紹介します。以下は実際のケースですので見てみましょう。

スワイパーの紹介

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

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

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

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

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

今回はバックグラウンドからデータを取得してdataを実行するシミュレーションを行いました。 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() は、インスタンスが DOM にマウントされるときにも使用されることを理解できます。 , メソッドがトリガーされます。

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 サイトの他の関連記事に注目してください。

推奨読書:

スタイルクラスをコンポーネントタグに追加するためのAngular5のステップバイステップの手順

内部コンポーネントカルーセルを切り替えるための詳細な手順を参照してください

以上がVueでのスワイパープラグインの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。