この記事の内容は、Vue でスワイパー カルーセル プラグインを使用してカルーセル図を実装する方法 (コード分析) についてです。必要な方は参考にしていただければ幸いです。 。
vue でカルーセル コンポーネントを使用する必要がある場合があります。vue コンポーネントにサードパーティ コンポーネントを導入する場合は、統合インストール パッケージ管理のために npm 経由でインストールするのが最善です。
免責事項: この記事では vue.2x バージョンを使用します。
npm 経由でプラグインをインストールします:
npm install swiper --save-dev
必要なコンポーネントにスワイパーを導入しますスワイパーを使用し、スワイパーの初期化はマウントされた
Slider.vueソースコードに配置されます:
<template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="../fixtures/sliders/t1.svg"/></div> <div class="swiper-slide"><img src="../fixtures/sliders/t2.svg"/></div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <!--<div class="swiper-button-prev"></div>--> <!--<div class="swiper-button-next"></div>--> <!-- 如果需要滚动条 --> <!--<div class="swiper-scrollbar"></div>--> </div> </template> <script> import 'swiper/dist/css/swiper.css' import Swiper from 'swiper'; export default { name: "Slider", mounted(){ new Swiper ('.swiper-container', { loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', }) } } </script> <style scoped> .swiper-container { width: 100%; margin: 0; padding: 0; } .swiper-wrapper { height: 200px; } .swiper-slide img { max-width: 100%; } .swiper-slide { text-align: center; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } </style>
実行効果:
次に、上記のコードをリファクタリングします。これは、Swiper がページ上に要素を配置するための基礎として CSS セレクターを使用する場合、ページ上に 2 つの .slider-container がある場合に発生するためです。同時に、このコンポーネントは混乱を引き起こします。コードをリファクタリングするには、低結合開発アプローチに従う必要があります。
Vue が提供するより正確な指定方法を使用して、要素に ref の類似性を追加し、コード内で this.$refs 参照名を通じてそれを参照できます。
これはVue.js2.0以降の番号です
Vue.js 1.xのv-refの書き方を置き換えるのがrefタグです。動的バインディングに変更しました 画像の特定については、vue-cilとwebpackのローカル静的画像のパス問題の解決策を参照してください
静的リソースファイルを静的ディレクトリに転送しました。
リファクタリングされたコードは次のとおりです:
<template> <div> <div class="swiper-container" ref="slider"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="slide in slides"> <router-link :to="{name:'BookDetail',params:{id:slide.id}}"> <img :src="slide.img_url"/> </router-link> </div> </div> </div> </div> </template> <script> import 'swiper/dist/css/swiper.css' import Swiper from 'swiper' export default { name: "Slider", data(){ return{ slides:[{id:1,img_url:'./static/sliders/t1.svg'},{id:2,img_url:'./static/sliders/t2.svg'}] } }, mounted(){ new Swiper (this.$refs.slider, { loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', }) } } </script>
ここでコンポーネントは完全に独立しているわけではありません。実際、このデータはパラメータとして渡すことができます。つまり、データは相互に転送されます。コンポーネント。
ルーティングを通じてパラメータを渡し、router/index.jsでルートを定義します
export default new Router({ routes: [ { name:'BookDetail', path:'/books/:id', component: BookDetail } ] })
渡す必要があるルーティングパラメータは前のカルーセルコンポーネントで定義されています
<router-link :to="{name:'BookDetail',params:{id:slide.id}}"> <img :src="slide.img_url"/> </router-link>
パラメータ受信インターフェイス BookDetail.vue
<template><p> 点击的是:<span v-text="id"></span></p></template><script> export default { name: "BookDetail", data(){ return{ id:this.$route.params.id } }, props:[] }</script><style scoped></style>
渡すべきパラメータが多すぎる場合、このメソッドは明らかに不便なので、vuex またはコンポーネント データ転送を使用できます。
コンポーネント値の転送については、次を参照してください: Vue コンポーネント値の転送
Vue-cli npm run build 本番環境のパッケージ化について、問題はローカルで開くことができません
それ以降は毎回、hs を実行するだけです。
関連する推奨事項:
jQuery アダプティブ カルーセル プラグイン Swiper の使用例
スワイパー コンポーネントを使用してカルーセル広告効果を実現する
Vue は Swiper をカプセル化し、画像カルーセル効果のコード共有を実装します
以上がvue でスワイパー カルーセル プラグインを使用してカルーセル画像を実装する方法 (コード分析)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。