第一种方法:采用延时器
第一步:引入相应的依赖包(swiper.js|swiper.css)
第二步:页面的结构务必要有
第三步:初始化swiper实例,给轮播图添加动态效果
mounted() {
//派发action:通过Vuex发起ajax请求,把数据仓储在仓库中
this.$store.dispatch("getBannerList");
//在new Swiper实例之前,页面的结构必须要有,如果没实现,应该是结构不完整
//因为dispatch当中涉及到异步语句,导致v-for遍历的时候结构还没有完整 因此不行
setTimeout(() => {
var mySwiper = new Swiper(".swiper-container", {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable:true //点击小球也切换图片
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",