第一步:安装依赖 npm i swiper (可以根据需要选择对应版本)
第二步:引入相应的依赖包(swiper.js swiper.css)
第三步:页面中的结构务必要有
第四步:初始化 swiper 实例,new Swiper() ,给轮播图添加动态的效果
接下来,创建swiper实例即可,主要有以下几种:
第一种(在updated中创建)【最好不用】:
updated() { // 在updated中可以实现功能,但是如果还有其他响应式数据,数据每一次变化 都要重新执行,所以轮播图不采用这个办法
var mySwiper = new Swiper('.swiper-container', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
},
第二种(在mounted中,配合定时器setTimeout使用)【不太推荐】:
这种方法就是 等我们的数据请求完毕后再创建swiper实例
mounted() { // mounted 组件挂载完毕,正常的结构(DOM)全有了
// 派发actions 通知Vuex发送Ajax请求,将数据存储在仓库当中
this.$store.dispatch('getBannerList');
// 在 new Swiper 之前,页面中的结构必须有,直接把swiper实例放在mounted里面,不能实现功能(因为结构还不完整)
// 为什么结构还不完整? 如果写在mounted中,在 new Swiper 之前,还未修改仓库中的bannerList数据
// 因为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',
}
});
}, 2000)
},
第三种(watch + $nextTick 配合使用)【最好、推荐】:
我们可以使用watch监听bannerList轮播图列表属性,因为bannerList初始值为空,当它有数据时,我们就可以创建swiper对象。
但是只监听bannerList数据也无法实现功能,这是由于轮播图的html中有v-for的循环,我们是通过v-for遍历bannerList中的图片数据,然后展示。我们的watch只能保证在bannerList变化时创建swiper对象,但是并不能保证此时v-for已经执行完了。假如watch先监听到bannerList数据变化,执行回调函数创建了swiper对象,之后v-for才执行,这样也是无法渲染轮播图图片(因为swiper对象生效的前提是DOM结构已经渲染好了)。
所以最好的解决方法是:使用 watch 监听 bannerList 数据,配合 $nextTick 使用。(此时数据bannerList已经有了,且v-for已经渲染完毕)
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
watch: {
// 监听bannerList数据的变化。因为这条数据发生过变化---由一个空数组变为数组里面有4个元素
bannerList: {
handler(newValue, oldValue) {
// 通过watch监听bannerList属性的属性值的变化
// 如果执行handler方法,代表组件实例身上这个属性的属性值已经有了 【是一个数组】
// 当前的这个函数执行,只能保证bannerList数据已经有了,无法保证v-for执行结束
// v-for执行完毕了,才有结构【现在在watch当中,没办法保证】
// nextTick: 在下次DOM更新 循环结束之后 执行延迟回调。在 修改数据之后 立即使用这个方法,获取更新后的DOM ,
// 下次指 数据已经有了 且 v-for已经渲染完毕(指循环结束之后)
this.$nextTick(() => { // 当执行回调的时候,保证服务器的数据回来了,且 v-for 执行完毕了,所以轮播图的结构一定有了
var mySwiper = new Swiper('.swiper-container', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true // 小点点击可以切换
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
})
}
}
}
轮播图的实现思想主要就是:使用mockjs插件模拟数据,并使用store仓库,以及其中的方法获取数据,再使用v-for将数据渲染到页面,最后使用swiper插件 创建swiper实例,实现轮播图的效果(一定要弄清楚,什么时候 创建swiper实例【当页面中已经有了结构】)