VUE-Swiperプラグインアプリケーションのカルーセル図vue-awesome-swiper [詳細な手順]

VUEのカルーセル図-Swipervue-awesome-swiperプラグインアプリケーション[詳細な手順]

---

序文

Swiper（Swiper master）は、現在広く使用されているモバイルWebタッチコンテンツスライディングjsプラグインです。純粋なJavaScriptによって作成されたスライディング特殊効果プラグインです。携帯電話やタブレットなどのモバイル端末向けであり、実現できます。タッチスクリーンフォーカスマップ、タッチスクリーンタブ切り替え、タッチスクリーンでのマルチイメージ切り替えなどの一般的な効果。この記事では、Swiperプラグインとは何か、およびSwiperプラグインを使用してVUEプロジェクトにカルーセルを実装する方法を説明します。

---

1.スワイパーとは何ですか？

Swiper（Swiper master）は、現在広く使用されているモバイルWebタッチコンテンツスライディングjsプラグインです。純粋なJavaScriptによって作成されたスライディング特殊効果プラグインです。携帯電話やタブレットなどのモバイル端末向けであり、実現できます。タッチスクリーンフォーカスマップ、タッチスクリーンタブ切り替え、タッチスクリーンでのマルチイメージ切り替えなどの一般的な効果。

swiperは、モバイルとPCでスライド操作を実装するために使用できる最初のサードパーティライブラリであり、非常に便利です。
公式ドキュメント：https：//www.swiper.com.cn/
インストールと使用対策のチュートリアルを参照してください。GitHub
URL：https：//github.com/surmon-china/vue-awesome-swiper

次に、手順を使用します

1.インストール

古いバージョンは新しいバージョンよりも安定しているため、ここでは2.6.7バージョンをインストールします

npm install swiper [email protected] --save

2.VUEにスワイパーを導入

スワイパーを導入するには、これら2行のコードをmain.jsに追加する必要があります

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

3.VUEでスワイパーを使用する

まず、ディレクトリ構造を見てください。

ホームフォルダの下にコンポーネントフォルダとHome.vueがあります。
明らかに、コンポーネント間の参照を使用し、Home.vueのswiper.vueサブコンポーネントを参照する必要があります。

GitHubのリファレンスチュートリアルはこのように書かれています。

もちろん、これを直接書くと、カルーセルは写真ではなく数字になるので、ここでも少し調整しました。
実際、それは<swiper-slide></swiper-slide>imgタグを追加しています/

Swiper.vueのコードに直接移動します：
html部分：

<template>
<div class="wrapper">
    <swiper :options="swiperOptions">
    <swiper-slide>
        <img class="swiper-img" src="./img/1.jpg"/>
    </swiper-slide>
    <swiper-slide>
        <img class="swiper-img" src="./img/2.jpg"/>
    </swiper-slide>
    <swiper-slide>
        <img class="swiper-img" src="./img/3.jpg"/>
    </swiper-slide> 
    
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>

jsパート

export default {
    
    
    name:'HomeSwiper',
    data(){
    
    
        return{
    
    
            swiperOptions:{
    
    
                pagination:'.swiper-pagination',
            }, 
        }
    }
}

もちろん、Home.vueにHome.vuehtml部分を導入する必要があることを忘れないでください

<template>
  <div >
    <home-swiper></home-swiper>
  </div>
</template>

jsパート

import HomeSwiper from './components/Swiper'
export default {
    
    
  name: 'Home',
  components :{
    
    
    HomeSwiper
  },
}

4.最適化と改善：v-forを使用してカルーセル図を表示します

私たちの最初の方法のように、書くのは難しく、写真を修正したり追加したりするのは便利ではありません。v-forを使用して、改善と最適化を行うことができます。実際、画像のアドレスはオブジェクト配列に格納され、imgタグの画像アドレスは周期的にロードされます。

アドレスを保存するときに、require（）関数を追加する必要があることに注意してください。
詳細については、https ：//www.cnblogs.com/SamWeb/p/8519735.htmlを参照してください。

html部分

<div class="wrapper">
    <swiper :options="swiperOptions">
    <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl"/>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>

jsパート

export default {
    
    
    name:'HomeSwiper',
    data(){
    
    
        return{
    
    
            swiperOptions:{
    
    
                pagination:'.swiper-pagination',
            },
            swiperList:[
                {
    
    
                    id:'0001',
                    imgUrl:require('./img/1.jpg'),

            },
            {
    
    
                 id:'0002',
                 imgUrl:require('./img/2.jpg'),

            },
            {
    
    
                 id:'0003',
                 imgUrl:require('./img/3.jpg'),
            }
            ],
            
        }
    }
}

よし〜おめでとうございます！かわいいカルーセル画像ができました〜（///▽///）〜