ホームページ > 記事 > ウェブフロントエンド > vue.jsでスワイパーを使用する方法
vue.js で swiper を使用する方法: まず [swiper.js] をダウンロードし、次に [swiper.js] を [main.js] にグローバルに導入し、最後にテンプレートで関連するコンテンツを構成します。
【関連記事のおすすめ: vue.js】
vue.js で使用swiper メソッド:
1. swiper.js
npm install vue-awesome-swiper --save
2. swiper.js を main.js
import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper)
にグローバルに導入します3. テンプレート内の設定関連コンテンツ
<template> <swiper :options="swiperOption"> <swiper-slide v-for="item in imglist"> <img :src="rootLink+ '/resources/img/' + item.imgPath"/> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </template> <script> import axios from 'axios' export default { name: 'carrousel', data() { return { rootLink: 'http://119.23.28.239:8080', imglist:[], swiperOption: { autoplay: 3000, //l轮播间隔时间 loop: true, //是否自动轮播 pagination : '.swiper-pagination', //轮播图中下标点显示 paginationClickable :true //轮播图中下标点显示 } } }, mounted() { var vm = this; axios.get(vm.rootLink + '/train/homePage/banner?type=上面') .then(function (data) { vm.imglist = data.data.data }) } } </script>
関連する無料学習の推奨事項:JavaScript(ビデオ)
以上がvue.jsでスワイパーを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。