vue |通过swiper实现动态数据的简单轮播
做个轮播碰到了不少坑，记录一下。
这里主要是在html的基础上用vue实现轮播功能
CDN
首先在lib文件夹上存放会用到的脚本，并在index文件中导入。由于图片数据是通过接口获得的，所以我这里使用了axios插件来帮助我获取数据
<head>
//Vue相关脚本
<script src="./lib/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//Swiper相关脚本
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
</head>
创建vue实例
<div id="app" class="main">
</div>
new Vue({
el:'#app',
data:{
//存放图片数据
picList:[],
},
})
功能
这里是单纯地实现轮播功能，于是我根据swiper的官方文档只用了一部分,这里面的.swiper-slide存放的是你想轮播的内容。由于我使用的是动态获取数据，于是我修改了一下
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<!-- 修改后 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,i) in picList" :key="i">
<img :src="item.url">
</div>
</div>
</div>
接口获取数据的方法
methods:{
getPicList(){
//如果你需要传参，可以在url后面加个对象`{}`，具体可以看axios官方文档
axios.post('url')
.then( res=> {
//这里我过滤了url不为空的对象，使之组合成一个新的数组对象。你可以根据你自己返回的数据进行修改
this.picList=res.data.Data.filter(item=>{
return item.url!=="" })
}).catch(function (error) {
console.log('error');
});
},
}
初始化Swiper
//这是官方文档的写法
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
})
//本实例我选择用函数包裹写在methods中，加定时器是解决loop失效的问题。其他的配置属性建议去swiper的API文档进行查看
initSwiper(){
setTimeout(()=>{
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
direction:"horizontal",
speed:500,
autoplay :{
//防止拖拽后无法自动滑动
disableOnInteraction:false,
delay:4000
},
//防止拖拽后无法自动滑动
observer:true,
observeParents:true,
observeSlideChildren:true,
})
},300)
}
在生命钩子上调用接口函数和初始化函数
mounted() {
this.getPicList()
this.initSwiper()
},
好啦！剩下的就是添加样式了，祝你一切顺利！
