解决vue中使⽤swiper插件问题及swiper在vue中的⽤法Swiper简介
Swiper常⽤于移动端⽹站的内容触摸滑动。
Swiper是纯javascript打造的滑动特效插件，⾯向⼿机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常⽤效果。
Swiper开源、免费、稳定、使⽤简单、功能强⼤，是架构移动终端⽹站的重要选择！
解决vue中使⽤swiper插件，在引⼊swiper插件后，发现⽆法正常运⾏问题
这次我们模拟从后台取下数据，然后数据绑定在swiper标签中。
<template>
<div class="homePage">
<abc></abc>
<div id="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="items in swiper" ><a href=""><img :src=" rel="external nofollow" items.activity.img"></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</template>
<script>
import Swiper from "../../static/js/swiper-3.4.0.min.js";
import header from 'components/header.vue';
export default {
components : {
abc : header
},
data(){
return {
swiper:""
}
代码运行js特效},
mounted(){
this.$("www.vrserver.applinzi/aixianfeng/apihome.php").then(function(res){
this.swiper=res.data.data.slide;
var mySwiper = new Swiper('.swiper-container', {
autoplay: 2000,//可选选项，⾃动滑动
//分页器
pagination : '.swiper-pagination',
paginationClickable :true,
observer: true
})
})
}
}
</script>
<style type="text/css">
@import "../../static/css/home.css";
@import "../../static/css/swiper-3.4.0.min.css";
</style>
重点就在mounted()的使⽤，需要把这些⽅法都放在 mounted()⾥使⽤， mounted()是 vue⽣命周期钩⼦，你也可以理解为当挂载实例到 DOM完了后，才会触发的⽽⽅法。
下⾯看下swiper在vue中的⽤法
⾸先通过npm i vue-awesome-swiper --save 来在vue中下载插件
然后再main.js中引⼊
require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
接着在需要⽤到的组件⾥结构中插⼊代码
<div class="banner">
<swiper :options="swiperOption">
<swiper-slide v-for="items in allData.bannerphoto" key="items">
<img :src="items" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<div class="jc"></div>
</div>
然后在data中定义轮播图
swiperOption: {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: false,
coverflow: {
  rotate: 30,
  stretch: 10,
  depth: 60,
  modifier: 2,
  slideShadows : true
  }
},
此时的coverflow是轮播图切换的⽅式更改属性可切换轮播模式。
总结
以上所述是⼩编给⼤家介绍的解决vue中使⽤swiper插件问题及swiper在vue中的⽤法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。