Vue で Swiper プラグインを使用するためのヒント

今回は、vue での swiper プラグインの使い方についてのヒントをお届けします。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 でスワイパーがどのように使用されるかを見てみましょう

まず、

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

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

推奨読書:

Expressのデフォルトログコンポーネントmorganの詳細な紹介

Webpackのホットモジュール置換HMR/ホットアップデートの具体的な手順

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