Vue框架里使用Swiper的方法示例
时间：2021-05-14 10:39:53|栏目：vue|点击： 次
下载swiper
首先使用npm 或者cnpm下载swiper
cnpm install swiper
引入swiper
import Swiper from ‘swiper'; import ‘swiper/dist/css/swiper.min.css';
使用swiper
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../../static/images/ad1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../../static/images/ad2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../../static/images/ad3.jpg" alt="">
</div>
</div>
</div>
mounted里面调用
mounted(){
var mySwiper = new Swiper('.swiper-container', {
autoplay:true,
loop:true
})
},
注意
如果想要从后台请求图片放上去 new Swiper要写在网络请求成功的函数里面，否则不会出来数据。
slider组件的内容如下：
<template>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide v-for="(picitem,index) in items" :key="index">
<img :src="picitem.src" alt="">
</swiper-slide>
</swiper>
</template>
<script type="text/ecmascript-6">
import {swiper, swiperSlider} from 'vue-awesome-swiper'
export default {
data() {
return {
swiperOption: {
notNextTick: true,
loop: true,
autoplay: true,
speed: 1000,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: '.swiper-pagination',
paginationClickable: true,
mousewheelControl: true,
observeParents: true,
debugger: true
},
items: [
{src: 'http://localhost/static/images/1.jpg'},
{src: 'http://localhost/static/images/2.jpg'},
{src: 'http://localhost/static/images/3.jpg'},
{src: 'http://localhost/static/images/4.jpg'},
{src: 'http://localhost/static/images/5.jpg'}
],
}
},
components: {
swiper,
swiperSlider
}
}
</script>
<style lang="stylus" rel="sheetstylus">
</style>
解释一下：autoplay:true这样可以解决不自动轮播问题。如果想设置滚动的时间，用speed设置相应时间即可。direction可以设置轮播的方向。具体的参数可参考swiper的官网地址：http://www.swiper.com.cn/api/Effects/2015/0308/193.html
