解决vue中使用swiper插件——李帅醒博客
解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行这次我们模拟从后台取下数据,然后数据绑定在swiper标签中。<template><div class="home_page"><m-header></m-header><div
·
解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行
这次我们模拟从后台取下数据,然后数据绑定在swiper标签中。
<template>
<div class="home_page">
<m-header></m-header>
<div id="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="items in swiper"><a href=""><img :src="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 mHeader from 'components/header.vue';
export default {
components: {
mHeader
},
data() {
return {
swiper: []
}
},
created(){
this.getList()
},
methods: {
getList() {
this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then((res) => {
this.swiper = res.data.data.slide;
// 数据回来了,DOM还没渲染完,所以需要调用Vue提供的$nextTick方法,再进行swiper初始化。
this.$nextTick(() => {
this.initSwiper();
})
})
},
initSwiper() {
let mySwiper = new Swiper('.swiper-container', {
autoplay: 2000,//可选选项,自动滑动
//分页器
pagination: '.swiper-pagination',
paginationClickable: true,
observer: true
})
}
}
}
</script>
重点就在$nextTick的使用,$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。
更多推荐
已为社区贡献2条内容
所有评论(0)