vue 安装swiper
网站有人说 npm install vue-awesome-swiper --save-dev ,我试了搞不定,后面各种找,综合各种方法,终于搞定了
1 、下载swiper,拿到 css,js文件,
将swiper.min.js文件放入 static 文件目录下
将swiper.min.css文件放入 scr/assets 文件目录下
2 、vue里引入js、css文件
script标签里引 入swiper.min.js
import Swiper from '../../static/swiper.min.js'
style标签里引 入swiper.min.css
3 、在template 标签里写你的轮播代码
<div id="mainImg"> <div class="swiper-wrapper"> {volist name="mainImgData" id="data"} <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="{$data}"> </div> </div> {/volist} </div> <div class="countNum"><span class="activeIndex">1</span>/<span class="all">5</span></div> </div>
4、在vue mounted() 方法里写你的js
var swiper = new Swiper('#mainImg', { zoom: true, pagination: { el: '.swiper-pagination', }, on:{ slideChange: function(){ $('#mainImg .activeIndex').text(this.activeIndex+1); //当前图片数字 } }, preventClicksPropagation : false, });