VUE引入式开发环境中,使用swiper会出现swiper无法初始化的情况。那是因为加载swiper的时候dom还没有渲染完成,造成swiper初始化失败。
解决方案:把swiper放到VUE钩子函数里面进行初始化。
注意js文件的引入顺序,vue.js一定要放到swiper.js前面。
- ar myApp = new Vue({
- el: '#myDiv',
- data: {
- },
- mounted(){
- var mySwiper = new Swiper ('.swiper-container', {
- //swiper
- })
- }
- })
还有一个说法是:
这里是updated,就是这个方法踩了坑,vue.js对updated的规定是:只有data里的变量改变并且要在页面重新渲染完成之后,才会进updated生命周期,只改变data里的值但是没有再页面上渲染该值的话并不会触发updated方法。
- ar myApp = new Vue({
- el: '#app',
- data: {
- },
- updated: function() {
- var swiper = new Swiper('.swiper-container', {
- pagination: {
- el: '.swiper-pagination',
- },
- });
- },
- })
如果data里边的值没有变化,是不会触发updated的 所以上面的js并不会执行,在这个坑里踩了好久,想执行必须动态的改一下data里边的数据,比如:
这样才会执行updated,也就是才回去渲染swiper幻灯片
- mounted(){
- this.banner = [];//你的banner数据
- },
文章点评