Vue でのスワイパーの用途は何ですか?

今回は、vue でのスワイパーの使い方と、vue でスワイパーを使用する際の注意事項について説明します。以下は実際的なケースです。

Swiper は、javascript だけで作成されたスライド特殊効果プラグインで、携帯電話、タブレット、その他のモバイル端末を対象としています。この記事では、vue でのスワイパー プラグインの使用方法と、vue でのスワイパーの使用方法を主に紹介します。必要な友達は、

スワイパーの紹介

スワイパーはタッチとスライドによく使用されます。モバイル 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 サイトの他の関連記事に注目してください。

推奨読書:

mint-ui in vue

webpackホットモジュール置換の使用方法の詳細説明

jQueryバージョンの選択方法

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